/*
  Flavima design tokens.

  Translated from the approved Claude Design handoff's own token files
  (tokens/colors.css, typography.css, spacing.css, borders.css). Values are
  transcribed as documented there, not rounded or re-derived. Kept as plain
  native CSS custom properties: no preprocessing, no generated pipeline.
*/

:root {
  /* ============= brand core ============= */
  --flav-navy: #000C6A;         /* primary brand navy */
  --flav-navy-logo: #000B70;    /* navy inside the logotype artwork */
  --flav-navy-deep: #0D1563;    /* stroke-only navy */
  --flav-gold: #E0B639;         /* web/UI gold accent (buttons, rules, links) */
  --flav-yellow: #F3C100;       /* Figma variable "Flav Yellow" (brand-guide only) */
  --flav-yellow-brand: #E9B400; /* pictogram + pattern yellow */

  /* ============= ink + neutrals ============= */
  --flav-ink: #11162D;          /* body copy ink */
  --flav-black-cool: #1C1C1A;   /* Areas of Expertise body copy */
  --flav-white: #FFFFFF;

  /* ============= surfaces ============= */
  --flav-bone: #F8F7F2;         /* warm off-white, default page ground */
  --flav-bone-2: #F5F3EE;       /* off-white on navy (CTA heading colour) */
  --flav-stone: #EDECEB;
  --flav-mist: #EEF0F4;         /* cool section ground (alternating bands) */
  --flav-stroke-warm: #D4D4CC;  /* Areas of Expertise row dividers */

  /* ============= alpha ramps (navy on light) ============= */
  --flav-navy-88: rgba(0, 12, 106, 0.88);
  --flav-navy-78: rgba(0, 12, 106, 0.78);
  --flav-navy-52: rgba(0, 12, 106, 0.52);
  --flav-navy-34: rgba(0, 12, 106, 0.34);
  --flav-navy-596: rgba(0, 12, 106, 0.596);
  --flav-navy-20: rgba(0, 12, 106, 0.2);   /* hairline borders on light */
  --flav-navy-15: rgba(0, 12, 106, 0.15);
  --flav-navy-10: rgba(0, 12, 106, 0.1);
  --flav-navy-08: rgba(0, 12, 106, 0.08); /* 404 ghost numeral */
  --flav-navy-04: rgba(0, 12, 106, 0.04); /* portrait overlay */

  /* ============= alpha ramps (ink + white) ============= */
  --flav-ink-75: rgba(17, 22, 45, 0.75);
  --flav-ink-70: rgba(17, 22, 45, 0.7);
  --flav-white-90: rgba(255, 255, 255, 0.9);
  --flav-white-80: rgba(255, 255, 255, 0.8);
  --flav-white-60: rgba(255, 255, 255, 0.6);
  --flav-white-35: rgba(255, 255, 255, 0.35);
  --flav-white-20: rgba(255, 255, 255, 0.2);

  /* ============= utility / external ============= */
  --flav-linkedin: #0076B2;

  /* ================= semantic aliases ================= */
  --surface-page: var(--flav-white);
  --surface-warm: var(--flav-bone);
  --surface-cool: var(--flav-mist);
  --surface-inverse: var(--flav-navy);
  --surface-card: var(--flav-white);

  --text-heading: var(--flav-navy);
  --text-body: var(--flav-ink-75);
  --text-body-strong: var(--flav-ink);
  --text-muted: rgba(0, 12, 106, 0.5);
  --text-eyebrow: var(--flav-navy);
  --text-eyebrow-inverse: var(--flav-gold);
  --text-on-inverse: var(--flav-white);
  --text-on-inverse-body: var(--flav-white-80);
  --text-on-inverse-faint: var(--flav-white-60);

  --accent: var(--flav-gold);
  --accent-rule: var(--flav-gold);

  --border-hairline: var(--flav-navy-20);
  --border-hairline-soft: var(--flav-navy-15);
  --border-hairline-faint: var(--flav-navy-10);
  --border-inverse: var(--flav-white-20);
  --border-input: rgba(0, 12, 106, 0.35);

  --link: var(--flav-navy);
  --link-hover: var(--flav-gold);
  --link-inverse: var(--flav-white-80);
  --link-inverse-hover: var(--flav-gold);

  /* ============= typography: families + weights ============= */
  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* display scale — Familjen Grotesk 500 */
  --type-hero-size: 80px;   --type-hero-lh: 1;       --type-hero-ls: -2.4px;
  --type-hero-m-size: 48px; --type-hero-m-lh: 56px;  --type-hero-m-ls: -1.2px;
  --type-h2-size: 48px;     --type-h2-lh: 48px;      --type-h2-ls: -1.2px;
  --type-h2-m-size: 36px;   --type-h2-m-lh: 36px;    --type-h2-m-ls: -0.9px;
  --type-h2-cta-size: 46px; --type-h2-cta-lh: 48px;  --type-h2-cta-ls: -1.15px;
  --type-h3-size: 30px;     --type-h3-lh: 36px;      --type-h3-ls: 0px;
  --type-h4-size: 24px;     --type-h4-lh: 30px;      --type-h4-ls: -0.6px;
  --type-h5-size: 20px;     --type-h5-lh: 28px;      --type-h5-ls: -0.5px;
  --type-quote-size: 20px;  --type-quote-lh: 32px;
  --type-nav-overlay-size: 44px; --type-nav-overlay-lh: 1; --type-nav-overlay-ls: 0px;
  --type-numeral-size: 96px; --type-numeral-lh: 96px; /* desktop expertise ghost numerals */
  --type-numeral-m-size: 72px; --type-numeral-m-lh: 72px;
  --type-404-size: 272px;   --type-404-lh: 195.84px; --type-404-ls: -24.48px;
  --type-404-m-size: 144px; --type-404-m-lh: 103.68px; --type-404-m-ls: -12.96px;

  /* body scale — Manrope */
  --type-lead-size: 16px;    --type-lead-lh: 32px;
  --type-body-size: 16px;    --type-body-lh: 24px;
  --type-prose-size: 14px;   --type-prose-lh: 28px;
  --type-meta-size: 14px;    --type-meta-lh: 24px;
  --type-label-size: 14px;   --type-label-lh: 20px;
  --type-caption-size: 12px; --type-caption-lh: 16px;
  --type-fine-size: 13px;    --type-fine-lh: 20.15px; --type-fine-ls: 0.26px;

  /* eyebrow / overline — Manrope uppercase, semibold, wide tracking */
  --type-eyebrow-size: 12px; --type-eyebrow-lh: 16px; --type-eyebrow-ls: 1.5px;
  --type-eyebrow-ls-footer: 1.68px;
  --type-eyebrow-ls-hero: 1.8px;
  --type-eyebrow-ls-hero-m: 1.92px;

  /* ============= spacing scale ============= */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px;
  --space-16: 64px; --space-20: 80px; --space-25: 100px; --space-32: 128px;

  /* page frame */
  --layout-max: 1440px;
  --page-gutter-desktop: 48px;    /* 1440 reference */
  --page-gutter-mobile: 20px;     /* 390 reference */
  --content-max: 1344px;          /* 1440 - 2*48 working content span */
  --layout-section-y: 128px;      /* desktop full-weight section rhythm */
  --layout-section-y-tight: 80px; /* desktop lighter-band rhythm, and mobile default */
  --layout-section-y-mobile-tight: 64px;
  --layout-grid-gap: 32px;

  /* measures */
  --measure-narrow: 448px;
  --measure-copy: 576px;
  --measure-wide: 672px;
  --measure-hero: 1024px;

  /* component heights */
  --control-h: 52px;       /* Button, mobile block */
  --control-h-lg: 54px;    /* Button, desktop/hero/CTA call sites */
  --nav-h: 86px;           /* desktop top nav */
  --nav-h-compact: calc(var(--nav-h) * 0.8);
  --nav-h-mobile: 81px;
  --nav-h-mobile-compact: calc(var(--nav-h-mobile) * 0.8);
  --nav-logo-h: 67.2px;    /* 56px Figma lockup + 20% — locked at rest */
  --nav-logo-h-compact: calc(var(--nav-logo-h) * 0.8);
  --nav-logo-h-mobile: 57.6px; /* 48px + 20% — locked at rest */
  --nav-logo-h-mobile-compact: calc(var(--nav-logo-h-mobile) * 0.8);
  --icon-tile: 80px;       /* section pictograms */

  /* ============= borders / rules / rings ============= */
  --radius-hairline: 1px;  /* image masks */
  --radius-sm: 2px;        /* buttons, cards, sections — the brand default */
  --radius-md: 5px;        /* logo lockup containers (brand guide only) */

  --rule-1: 1px;
  --rule-accent: 2px;      /* blockquote left rule */
  --rule-len: 32px;        /* the gold eyebrow tick */

  /* the system is flat: the only "shadows" are 1px inset rings */
  --ring-hairline: inset 0 0 0 1px var(--flav-navy-20);
  --ring-inverse: inset 0 0 0 1px var(--flav-white-35);
  --ring-input: inset 0 0 0 1px var(--border-input);

  /* protection gradients over photography (hero / dark bands) */
  --scrim-hero: linear-gradient(-0.936deg, rgba(0,12,106,.88) -3.46%, rgba(0,12,106,.78) 25.99%, rgba(0,12,106,.52) 44.25%, rgba(0,12,106,.34) 58.17%, rgba(0,12,106,.596) 65.84%, rgba(0,12,106,.78) 78.68%, rgba(0,12,106,.88) 86.9%);
  --scrim-band: linear-gradient(-2.028deg, rgba(0,12,106,.88) .53%, rgba(0,12,106,.78) 27.8%, rgba(0,12,106,.52) 44.72%, rgba(0,12,106,.596) 64.73%, rgba(0,12,106,.78) 76.62%, rgba(0,12,106,.88) 84.23%);
  --scrim-wash: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55));
  --scrim-cta: linear-gradient(90deg, rgba(0,12,106,.86) 0%, rgba(0,12,106,.74) 52%, rgba(0,12,106,.5) 100%);

  /* motion — restrained, linear-ish, no bounce */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --transition-fast: var(--dur-base) var(--ease-standard);
}