/* ============================================================
   FERNANDIA BRAND TOKENS — source of truth (v1, Direction A "Modern Operator")
   Decided 2026-06-23. Audience: the "Izutech archetype" — brands with proven
   marketplace demand but poor execution. Feel: competent, modern, credible B2B.
   Frameworks applied: taste-skill (one accent locked; sans-forward; AA contrast;
   one radius scale; tinted shadows). WCAG contrast verified (see notes inline).

   PRODUCTION NOTE: self-host Manrope + Inter as woff2 + @font-face with
   font-display:swap. Do NOT <link> Google Fonts in production (perf + privacy).
   These tokens are meant to be imported/copied by every FERNANDIA-branded
   surface (website, decks, liquidation flyers). Product/listing creative is
   out of scope — each product keeps its own identity.
   ============================================================ */

:root{
  /* ---- Brand color ---- */
  --fn-navy:        #2a4d69;   /* primary brand */
  --fn-navy-deep:   #1e3a52;   /* headings, primary button, dark sections */
  --fn-navy-light:  #3a6a8a;   /* hovers, secondary navy */
  --fn-orange:      #ff6b35;   /* THE accent — locked, used sparingly */
  --fn-orange-deep: #e85a28;   /* accent hover / when orange must hold dark... see a11y */

  /* ---- Neutrals (cool grey ramp — one family, no warm/cool mixing) ---- */
  --fn-ink:    #1a1a2e;   /* primary text */
  --fn-grey:   #4a4a5a;   /* secondary text */
  --fn-muted:  #6b6b7a;   /* tertiary / captions (darkened from #7a7a8a to pass AA) */
  --fn-line:   #e4e7ec;   /* hairlines, borders */
  --fn-paper:  #f7f8fa;   /* light section ground */
  --fn-white:  #ffffff;

  /* ---- Semantic (forms/states) ---- */
  --fn-success: #1f7a52;
  --fn-error:   #c0392b;
  --fn-focus:   #3a6a8a;   /* focus ring (navy-light) */

  /* ---- A11y rules (VERIFIED contrast on white #fff) ----
     navy-deep on white .... 11.8:1  body text OK
     navy on white ......... 8.87:1  body text OK
     grey on white ......... 8.7:1   OK
     muted on white ........ 5.2:1   OK (captions/secondary)
     orange on white ....... 2.84:1  FAIL — never use orange for text on white
     white on navy ......... 8.87:1  primary button OK
     white on orange ....... 2.84:1  FAIL — no white-on-orange text/buttons
     => Primary CTA = navy. Orange = fills/rules/marks/hover, or dark text only. */

  /* ---- Typography ---- */
  --fn-font-display: "Manrope", system-ui, sans-serif;  /* headings, UI, wordmark */
  --fn-font-body:    "Inter", system-ui, sans-serif;     /* body, long-form */

  /* type scale (modular ~1.25, rem) */
  --fn-text-eyebrow: 0.75rem;   /* 12px, uppercase, used sparingly */
  --fn-text-caption: 0.8125rem; /* 13px */
  --fn-text-sm:      0.875rem;  /* 14px */
  --fn-text-base:    1rem;      /* 16px */
  --fn-text-lg:      1.125rem;  /* 18px lead/body-large */
  --fn-text-h4:      1.25rem;   /* 20px */
  --fn-text-h3:      1.5rem;    /* 24px */
  --fn-text-h2:      1.875rem;  /* 30px */
  --fn-text-h1:      2.5rem;    /* 40px */
  --fn-text-display: 3.75rem;   /* 60px hero (clamp in use) */

  /* weights */
  --fn-w-regular: 400;
  --fn-w-medium:  500;
  --fn-w-semibold:600;
  --fn-w-bold:    700;
  --fn-w-black:   800;  /* Manrope display only */

  /* line-height + tracking */
  --fn-lh-display: 1.03;
  --fn-lh-heading: 1.15;
  --fn-lh-body:    1.55;
  --fn-track-display: -0.03em;
  --fn-track-heading: -0.02em;
  --fn-track-eyebrow:  0.14em;

  /* ---- Spacing (4/8 rhythm) ---- */
  --fn-space-1: 4px;  --fn-space-2: 8px;  --fn-space-3: 12px; --fn-space-4: 16px;
  --fn-space-6: 24px; --fn-space-8: 32px; --fn-space-12: 48px; --fn-space-16: 64px;
  --fn-space-24: 96px;

  /* ---- Radius (ONE scale — taste-skill shape lock) ---- */
  --fn-radius-sm: 6px;    /* inputs, chips */
  --fn-radius-md: 8px;    /* buttons */
  --fn-radius-lg: 14px;   /* cards, panels */
  --fn-radius-pill: 999px;

  /* ---- Shadows (tinted navy, never pure black) ---- */
  --fn-shadow-sm: 0 1px 2px rgba(30,58,82,.06), 0 1px 3px rgba(30,58,82,.08);
  --fn-shadow-md: 0 4px 12px rgba(30,58,82,.08), 0 2px 4px rgba(30,58,82,.06);
  --fn-shadow-lg: 0 12px 32px rgba(30,58,82,.12);

  /* ---- Layout ---- */
  --fn-maxw: 1180px;
  --fn-transition: .15s ease;
}