/* =============================================================
   Anvilda Design Tokens — House Style v2.0
   Source of truth: company/brand/brand-guide.md
   Canonical source: company/brand/assets/tokens.css
   Copied to: sites/anvilda-com/public/assets/tokens.css
   ============================================================= */

/* Google Fonts: Inter (400–900) + JetBrains Mono (400–600) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* -------------------------------------------------------------
   Fallback @font-face stubs (used when Google Fonts is blocked)
   font-display: swap prevents FOIT
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: local('JetBrains Mono');
}

/* -------------------------------------------------------------
   Colour palette
   ~85% Forge/ink + 15% Ember.
   Ember is reserved for action/accent only (CTAs, active
   states, the spark) — never body text or large fills.
   ------------------------------------------------------------- */
:root {
  /* Forge ramp (primary / identity) */
  --forge-50:  #ECFDFA;
  --forge-100: #D0F7EE;
  --forge-200: #A3EDDD;
  --forge-300: #66DCC6;
  --forge-400: #2FC1AB;
  --forge-500: #14A493;
  --forge-600: #0B8276; /* primary brand colour */
  --forge-700: #0A6960;
  --forge-800: #0C544D;
  --forge-900: #0C4640;
  --forge-950: #053330; /* deep backgrounds, dark surfaces */

  /* Ember ramp (accent · the spark — RESERVED for action/accent only) */
  --ember-50:  #FEFBEA;
  --ember-100: #FCF3C7;
  --ember-200: #FBE79A;
  --ember-300: #F8D45A;
  --ember-400: #F4BE2A;
  --ember-500: #F2A100; /* accent — action / accent only */
  --ember-600: #CE8200;
  --ember-700: #9E6305;
  --ember-800: #7A4D00; /* WCAG AA accessible on white/surface (≥4.5:1) */

  /* Neutrals (unchanged from v1) */
  --color-ink:          #1C1917; /* headings, primary text */
  --color-body:         #57534E; /* body copy */
  --color-muted:        #6B6460; /* secondary / meta text — WCAG AA (≥4.5:1 on cream #F5F4F1 and surface #FAFAF9) */
  --color-hairline:     #E7E5E4; /* borders, dividers */
  --color-surface:      #FAFAF9; /* page surface */
  --color-cream:        #F5F4F1; /* alternating sections */

  /* Semantic colour aliases */
  --color-brand:        var(--forge-700); /* primary brand colour — WCAG AA (6.1:1 on cream, 6.4:1 on surface) */
  --color-deep:         var(--forge-950); /* deep backgrounds, dark surfaces */
  --color-coral:        var(--ember-500); /* accent / spark — back-compat alias */

  /* --brand and --coral are back-compat aliases — new code should use --forge-* / --ember-* */
  --brand:              var(--forge-600);
  --coral:              var(--ember-500);

  --color-text-primary:    var(--color-ink);
  --color-text-secondary:  var(--color-body);
  --color-text-muted:      var(--color-muted);
  --color-text-inverse:    #FFFFFF;
  --color-bg-page:         var(--color-surface);
  --color-bg-section-alt:  var(--color-cream);
  --color-bg-dark:         var(--color-deep);
  --color-border:          var(--color-hairline);
  --color-cta:             var(--ember-500);
  --color-cta-hover:       var(--ember-700); /* ember-700 — hover state, WCAG AA accessible (≥4.5:1 on cream) */

  /* Semantic success token (non-brand, UI-only) */
  --color-success:      #0CAF60;

  /* -------------------------------------------------------------
     Typography
     - Inter: primary typeface, sentence case, tight headlines
     - JetBrains Mono: meta/kickers/IDs/labels — UPPERCASE only
     ------------------------------------------------------------- */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Mono', 'Cascadia Code', monospace;

  /* Type scale (1.25 major-third modular scale) */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */
  --text-6xl:   4.5rem;    /* 72px */

  /* Font weights */
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  /* Letter spacing */
  --tracking-tight:     -0.03em;  /* headlines — Inter bold, tight */
  --tracking-normal:     0em;
  --tracking-wide:       0.05em;
  --tracking-mono:       0.14em;  /* JetBrains Mono labels — wide */
  --tracking-mono-wide:  0.18em;  /* JetBrains Mono kickers — extra wide */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* -------------------------------------------------------------
     Layout
     ------------------------------------------------------------- */

  /* Border radii */
  --radius-none:  0;
  --radius-sm:    0.25rem;   /* 4px */
  --radius-md:    0.5rem;    /* 8px */
  --radius-lg:    0.75rem;   /* 12px */
  --radius-xl:    1rem;      /* 16px */
  --radius-2xl:   1.5rem;    /* 24px */
  --radius-full:  9999px;    /* pill / circle */

  /* Hairline */
  --hairline: 1px solid var(--color-hairline);

  /* Spacing scale (4px base unit) */
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */

  /* Max content widths */
  --maxw:          1180px; /* brand container max-width */
  --width-prose:   65ch;
  --width-content: 1180px; /* updated to match --maxw */
  --width-wide:    90rem;  /* 1440px */

  /* -------------------------------------------------------------
     Component tokens
     ------------------------------------------------------------- */

  /* Button — primary (forge-600 background, white text) */
  --btn-primary-bg:          var(--forge-600);
  --btn-primary-bg-hover:    var(--forge-700);
  --btn-primary-text:        #FFFFFF; /* white on forge-600 */
  --btn-primary-radius:      var(--radius-md);
  --btn-primary-font-size:   var(--text-base);
  --btn-primary-font-weight: var(--font-weight-bold);
  --btn-primary-tracking:    var(--tracking-tight);
  --btn-primary-padding-x:   var(--space-6);
  --btn-primary-padding-y:   var(--space-3);

  /* Button — secondary (ghost, brand outline) */
  --btn-secondary-bg:          transparent;
  --btn-secondary-bg-hover:    var(--forge-600);
  --btn-secondary-text:        var(--forge-600);
  --btn-secondary-text-hover:  #FFFFFF;
  --btn-secondary-border:      var(--forge-600);
  --btn-secondary-radius:      var(--radius-md);

  /* Card */
  --card-bg:       #FFFFFF;
  --card-border:   var(--color-hairline);
  --card-radius:   var(--radius-xl);
  --card-shadow:   0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);

  /* Nav */
  --nav-bg:            #FFFFFF;
  --nav-border:        var(--color-hairline);
  --nav-text:          var(--color-ink);
  --nav-text-active:   var(--forge-600);
  --nav-height:        4rem;  /* 64px */

  /* Badge / kicker label (JetBrains Mono, uppercase) */
  --badge-font:        var(--font-mono);
  --badge-size:        var(--text-xs);
  --badge-weight:      var(--font-weight-semibold);
  --badge-tracking:    var(--tracking-mono);
  --badge-text-transform: uppercase;
  --badge-brand-bg:    color-mix(in srgb, var(--forge-600) 10%, transparent);
  --badge-brand-text:  var(--forge-600);
  --badge-coral-bg:    color-mix(in srgb, var(--ember-500) 10%, transparent);
  --badge-coral-text:  var(--ember-500);

  /* Shadows */
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.14), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.16), 0 4px 6px -4px rgb(0 0 0 / 0.12);
  --shadow-dark: 0 8px 32px 0 rgb(0 0 0 / 0.45), 0 2px 8px 0 rgb(0 0 0 / 0.30);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--forge-600) 30%, transparent);

  /* Transition */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
}