/* ============================================================
   Finback — Color Tokens
   Craft Maritime palette: ocean ink, canvas cream, stitch coral,
   seafoam teal. Base scales + semantic aliases.
   ============================================================ */
:root {
  /* ---- Ink (primary / ocean depths) ---- */
  --ink-900: #0C141E;
  --ink-800: #101820;  /* logo black */
  --ink-700: #16263F;  /* brand navy */
  --ink-600: #1E3454;
  --ink-500: #2C476B;
  --ink-400: #3F5E86;
  --ink-300: #6F88A8;
  --ink-200: #A8BACE;
  --ink-100: #D6DFE9;
  --ink-050: #EDF1F6;

  /* ---- Canvas (warm paper / fabric neutrals) ---- */
  --canvas-900: #2A271F;
  --canvas-800: #423D31;
  --canvas-700: #6A6450;
  --canvas-600: #8C856E;
  --canvas-500: #B0A88E;
  --canvas-400: #CFC7AF;
  --canvas-300: #E4DCC8;
  --canvas-200: #EFE9DA;
  --canvas-100: #F5EFE2;  /* primary surface cream */
  --canvas-050: #FAF6EC;
  --canvas-000: #FFFFFF;

  /* ---- Coral (stitch accent) ---- */
  --coral-700: #B23A1B;
  --coral-600: #CC4623;
  --coral-500: #E2552E;  /* brand accent */
  --coral-400: #EC7350;
  --coral-300: #F39C81;
  --coral-200: #F8C4B2;
  --coral-100: #FBE3DA;

  /* ---- Seafoam (secondary teal) ---- */
  --seafoam-700: #14655A;
  --seafoam-600: #1A8073;
  --seafoam-500: #1D7A6D;  /* brand secondary — darkened from #259B8B: the
     original only hit 3.4:1 for white text on a seafoam fill (CTA buttons)
     and 3.1:1 for seafoam text on the canvas background (section labels),
     both under WCAG AA's 4.5:1. This shade clears both (5.2:1 and 4.7:1)
     while staying the same teal hue, between the existing 600 and 700 stops. */
  --seafoam-400: #54B5A6;
  --seafoam-300: #8AD0C4;
  --seafoam-200: #BEE6DF;
  --seafoam-100: #E1F3EF;

  /* ---- Thread gold (tertiary highlight) ---- */
  --gold-600: #C08A2E;
  --gold-500: #D9A441;
  --gold-400: #E6BE6E;
  --gold-300: #F0D5A0;
  --gold-100: #F8EDD6;

  /* ---- Status ---- */
  --success-500: #259B8B;
  --success-100: #E1F3EF;
  --warning-500: #D9A441;
  --warning-100: #F8EDD6;
  --danger-600: #CC4623;
  --danger-500: #E2552E;
  --danger-100: #FBE3DA;
  --info-500: #2C476B;
  --info-100: #EDF1F6;

  /* ============ Semantic aliases ============ */
  /* Surfaces */
  --surface-page:    var(--canvas-100);
  --surface-raised:  var(--canvas-050);
  --surface-card:    var(--canvas-000);
  --surface-sunken:  var(--canvas-200);
  --surface-inverse: var(--ink-700);
  --surface-inverse-deep: var(--ink-900);

  /* Text */
  --text-strong:   var(--ink-800);
  --text-body:     var(--ink-700);
  --text-muted:    var(--canvas-700);
  --text-subtle:   var(--canvas-600);
  --text-inverse:  var(--canvas-100);
  --text-inverse-muted: var(--ink-200);
  --text-accent:   var(--coral-600);
  --text-link:     var(--seafoam-700);

  /* Borders */
  --border-subtle: var(--canvas-300);
  --border-default:var(--canvas-400);
  --border-strong: var(--ink-700);
  --border-stitch: var(--canvas-600);
  --border-focus:  var(--seafoam-500);

  /* Brand */
  --brand-primary:   var(--ink-700);
  --brand-accent:    var(--coral-500);
  --brand-secondary: var(--seafoam-500);
  --brand-gold:      var(--gold-500);
}
/* ============================================================
   Finback — Typography Tokens
   Display: Bricolage Grotesque (characterful, echoes the bouncy
            hand-lettered logo). Body: Hanken Grotesk (warm, legible).
            Mono: Space Mono (spec sheets, SKUs, dimensions).
   NOTE: Substituted Google Fonts — brand has no licensed typefaces
   on file yet. Flagged to user.
   ============================================================ */
:root {
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-extra:   800;  /* @kind font */

  /* Type scale (rem, 16px base) — modular ~1.22 */
  --text-2xs: 0.6875rem;  /* 11px — micro labels, spec tags */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px */
  --text-md:  1.125rem;   /* 18px */
  --text-lg:  1.375rem;   /* 22px */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 4rem;       /* 64px */
  --text-5xl: 5.25rem;    /* 84px */

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrow / micro-label all-caps */

  /* Semantic roles */
  --type-display-face: var(--font-display);
  --type-body-face:    var(--font-body);
  --type-mono-face:    var(--font-mono);
}
/* ============================================================
   Finback — Radius, Border, Shadow & Motion Tokens
   Soft organic rounding echoes the logo. A "stitch" dashed
   border motif nods to woven labels. Shadows are soft & warm.
   ============================================================ */
:root {
  /* Corner radii — generous & friendly */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  26px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hair: 1px;
  --border-thin: 1.5px;
  --border-bold: 2px;

  /* Stitch motif (dashed "sewn" outline) */
  --stitch-dash: 2px 4px; /* @kind other */ /* sewn-seam dash pattern */
  --stitch-color: var(--canvas-600);

  /* Shadows — warm, soft, low-spread (paper/fabric depth) */
  --shadow-xs: 0 1px 2px rgba(42, 39, 31, 0.06);
  --shadow-sm: 0 2px 6px rgba(42, 39, 31, 0.08);
  --shadow-md: 0 6px 18px rgba(42, 39, 31, 0.10);
  --shadow-lg: 0 16px 40px rgba(22, 38, 63, 0.14);
  --shadow-xl: 0 28px 70px rgba(12, 20, 30, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-focus: 0 0 0 3px rgba(37, 155, 139, 0.32);

  /* Motion — quick, slightly springy; no gratuitous bounce */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-emphasis: cubic-bezier(0.34, 1.32, 0.50, 1);   /* @kind other */ /* gentle overshoot */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);            /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}
/* ============================================================
   Finback — Spacing & Sizing Tokens
   4px base grid. Generous, tactile rhythm.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5.5rem;   /* 88 */
  --space-11: 7rem;     /* 112 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
  --section-y: var(--space-10);

  /* Control heights */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /* Min hit target */
  --hit-min: 44px;
}