/* =========================================================
   LWC SPHERE / SPHERE ONE
   Core visual tokens
   Based on the approved ANF Digital palette and UI concept
   ========================================================= */

:root {
  /* OFFICIAL ANF DIGITAL BRAND COLOURS */
  --anf-ivory: #FBF8F1;
  --anf-soft-cream: #F5EEDF;
  --anf-cream-stone: #EDE4D6;

  --anf-black: #0C0C0C;
  --anf-charcoal: #2B2B2B;

  --anf-bronze: #B7652A;

  --anf-warm-taupe: #CFC2AC;
  --anf-soft-stone: #DCD2C1;
  --anf-light-sand: #E6DCCB;
  --anf-pale-cream: #F2EBDD;
  --anf-warm-grey: #66615A;

  /* SPHERE SEMANTIC UI COLOURS */
  --sphere-bg: var(--anf-ivory);
  --sphere-surface: #FCF9F2;
  --sphere-surface-soft: #F8F5EC;
  --sphere-surface-muted: var(--anf-soft-cream);
  --sphere-card: #FCFAF5;

  --sphere-active-bg: rgba(183, 101, 42, 0.08);

  --sphere-border: rgba(43, 43, 43, 0.10);
  --sphere-border-strong: rgba(43, 43, 43, 0.16);

  --sphere-text: var(--anf-black);
  --sphere-text-secondary: var(--anf-charcoal);
  --sphere-text-muted: var(--anf-warm-grey);

  --sphere-accent: var(--anf-bronze);
  --sphere-accent-soft: rgba(183, 101, 42, 0.10);
  --sphere-accent-border: rgba(183, 101, 42, 0.28);

  --sphere-cta-bg: var(--anf-charcoal);
  --sphere-cta-border: var(--anf-charcoal);
  --sphere-cta-text: #FFF9F2;
  --sphere-cta-hover: var(--anf-black);

  --sphere-shadow-sm: 0 2px 8px rgba(12, 12, 12, 0.04);
  --sphere-shadow-md: 0 8px 28px rgba(12, 12, 12, 0.06);

  --sphere-radius-sm: 8px;
  --sphere-radius-md: 12px;
  --sphere-radius-lg: 16px;

  /* TYPOGRAPHY */
  --sphere-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sphere-font-serif: Georgia, "Times New Roman", serif;

  /* SHELL GEOMETRY */
  --sphere-header-height: 64px;
  --sphere-nav-width: 156px;
  --sphere-panel-width: 312px;
  --sphere-content-max: 1440px;
}

/*
  Visual standard:
  - Keep the main application canvas on ANF Ivory (#FBF8F1).
  - Use Burnished Bronze (#B7652A) as an accent, never as a dominant field.
  - Avoid blue SaaS colours, bright greens, purple AI gradients and neon effects.
  - Prefer low-opacity charcoal borders, spacing and tonal separation over heavy shadows.
  - Keep cards only slightly lighter than the workspace.
  - Use refined radii rather than exaggerated pill/bubble treatments.
  - Preserve generous whitespace and strong alignment.
  - Editorial headings may use serif; navigation, controls and data use sans-serif.
*/