/*
 * tokens.css — Amanda Morgan Design System
 * Generated from design-system tokens. DO NOT hand-edit.
 * Source of truth: tokens.json → edit there, regenerate here via Claude Code.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ─── @font-face ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');


/* ─── Primitives ─────────────────────────────────────────────────────────── */
:root {

  /* Size scale — name matches value in px */
  --size-0:   0px;
  --size-2:   2px;
  --size-4:   4px;
  --size-8:   8px;
  --size-12:  12px;
  --size-16:  16px;
  --size-18:  18px;
  --size-20:  20px;
  --size-24:  24px;
  --size-32:  32px;
  --size-40:  40px;
  --size-48:  48px;
  --size-54:  54px;
  --size-56:  56px;
  --size-60:  60px;
  --size-64:  64px;
  --size-72:  72px;
  --size-80:  80px;
  --size-96:  96px;
  --size-128: 128px;
  --size-160: 160px;
  --size-192: 192px;
  --size-256: 256px;
  --size-320: 320px;
  --size-480: 480px;

  /* Font-weight scale */
  --weight-100: 100;
  --weight-200: 200;
  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  --weight-800: 800;
  --weight-900: 900;

  /* Line-height scale */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter-spacing scale */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;

  /* Font families */
  --font-display:  'King Basil Lite', serif;
  --font-standard: 'Outfit', system-ui, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;

  /* Color: Blue — steps 10–80 light-friendly, 90–160 dark-friendly */
  --color-blue-10:  #EBF3FF;
  --color-blue-20:  #DCE4F2;
  --color-blue-30:  #CCD6E6;
  --color-blue-40:  #BDC7D9;
  --color-blue-50:  #ADB8CC;
  --color-blue-60:  #9EA9BF;
  --color-blue-70:  #8E9BB3;
  --color-blue-80:  #7F8CA6;
  --color-blue-90:  #6F7D99;
  --color-blue-100: #606E8C;
  --color-blue-110: #506080;
  --color-blue-120: #415173;
  --color-blue-130: #314266;
  --color-blue-140: #223359;
  --color-blue-150: #12254D;
  --color-blue-160: #031640;

  /* Color: Red */
  --color-red-10:  #FFF0EE;
  --color-red-20:  #F2E1DE;
  --color-red-30:  #E6D1CF;
  --color-red-40:  #D9C2BF;
  --color-red-50:  #CDB2B0;
  --color-red-60:  #C0A3A0;
  --color-red-70:  #B39390;
  --color-red-80:  #A78481;
  --color-red-90:  #9A7471;
  --color-red-100: #8E6562;
  --color-red-110: #815552;
  --color-red-120: #744642;
  --color-red-130: #683633;
  --color-red-140: #5B2723;
  --color-red-150: #4F1714;
  --color-red-160: #420804;

  /* Color: Green */
  --color-green-10:  #EDFBF3;
  --color-green-20:  #DDECE4;
  --color-green-30:  #CEDED4;
  --color-green-40:  #BECFC5;
  --color-green-50:  #AEC1B6;
  --color-green-60:  #9EB2A7;
  --color-green-70:  #8FA397;
  --color-green-80:  #7F9588;
  --color-green-90:  #6F8679;
  --color-green-100: #5F786A;
  --color-green-110: #50695A;
  --color-green-120: #405A4B;
  --color-green-130: #304C3C;
  --color-green-140: #203D2D;
  --color-green-150: #112F1D;
  --color-green-160: #01200E;

  /* Color: Orange */
  --color-orange-10:  #FFF5EB;
  --color-orange-20:  #F2E6DB;
  --color-orange-30:  #E5D8CC;
  --color-orange-40:  #D8C9BC;
  --color-orange-50:  #CABAAC;
  --color-orange-60:  #BDAB9D;
  --color-orange-70:  #B09D8D;
  --color-orange-80:  #A38E7D;
  --color-orange-90:  #967F6E;
  --color-orange-100: #89705E;
  --color-orange-110: #7C624E;
  --color-orange-120: #6F533F;
  --color-orange-130: #61442F;
  --color-orange-140: #54351F;
  --color-orange-150: #472710;
  --color-orange-160: #3A1800;

  /* Color: Purple */
  --color-purple-10:  #F4F0FF;
  --color-purple-20:  #E5E1F3;
  --color-purple-30:  #D7D2E7;
  --color-purple-40:  #C8C3DB;
  --color-purple-50:  #B9B3CF;
  --color-purple-60:  #ABA4C3;
  --color-purple-70:  #9C95B7;
  --color-purple-80:  #8D86AB;
  --color-purple-90:  #7F779E;
  --color-purple-100: #706892;
  --color-purple-110: #615986;
  --color-purple-120: #534A7A;
  --color-purple-130: #443A6E;
  --color-purple-140: #352B62;
  --color-purple-150: #271C56;
  --color-purple-160: #180D4A;

  /* Color: Yellow */
  --color-yellow-10:  #FFFCE8;
  --color-yellow-20:  #F2EED9;
  --color-yellow-30:  #E5E0C9;
  --color-yellow-40:  #D8D2BA;
  --color-yellow-50:  #CBC5AA;
  --color-yellow-60:  #BEB79B;
  --color-yellow-70:  #B1A98B;
  --color-yellow-80:  #A49B7C;
  --color-yellow-90:  #988D6C;
  --color-yellow-100: #8B7F5D;
  --color-yellow-110: #7E714D;
  --color-yellow-120: #71633E;
  --color-yellow-130: #64562E;
  --color-yellow-140: #57481F;
  --color-yellow-150: #4A3A0F;
  --color-yellow-160: #3D2C00;

  /* Color: Pink */
  --color-pink-10:  #FFF0F8;
  --color-pink-20:  #F2E0EA;
  --color-pink-30:  #E6D0DB;
  --color-pink-40:  #D9C1CD;
  --color-pink-50:  #CCB1BE;
  --color-pink-60:  #BFA1B0;
  --color-pink-70:  #B391A1;
  --color-pink-80:  #A68193;
  --color-pink-90:  #997284;
  --color-pink-100: #8C6276;
  --color-pink-110: #805267;
  --color-pink-120: #734259;
  --color-pink-130: #66324A;
  --color-pink-140: #59233C;
  --color-pink-150: #4D132D;
  --color-pink-160: #40031F;

  /* Color: Teal */
  --color-teal-10:  #EDFCFA;
  --color-teal-20:  #DDEEEB;
  --color-teal-30:  #CEDFDD;
  --color-teal-40:  #BED1CE;
  --color-teal-50:  #AEC2C0;
  --color-teal-60:  #9EB4B1;
  --color-teal-70:  #8FA5A3;
  --color-teal-80:  #7F9794;
  --color-teal-90:  #6F8886;
  --color-teal-100: #5F7A77;
  --color-teal-110: #506B69;
  --color-teal-120: #405D5A;
  --color-teal-130: #304E4C;
  --color-teal-140: #20403D;
  --color-teal-150: #11312F;
  --color-teal-160: #012320;

  /* Color: Neutral */
  --color-neutral-0:    #000000;
  --color-neutral-50:   #0F0F0E;
  --color-neutral-100:  #1A1917;
  --color-neutral-150:  #252420;
  --color-neutral-200:  #2F2E2B;
  --color-neutral-300:  #444441;
  --color-neutral-400:  #6B6960;
  --color-neutral-500:  #8A8880;
  --color-neutral-600:  #B4B2A9;
  --color-neutral-650:  #C2BFB6;
  --color-neutral-700:  #D0CDC5;
  --color-neutral-750:  #DEDAD3;
  --color-neutral-800:  #ECEAE5;
  --color-neutral-850:  #F2F0EB;
  --color-neutral-900:  #F5F3EE;
  --color-neutral-1000: #FFFFFF;


  /* ─── Semantics: Light Mode ─────────────────────────────────────────────── */

  /* Surfaces */
  --color-surface-page:      #fffff2;
  --color-surface-primary:   #f9f9f2;
  --color-surface-secondary: #f3f3e8;
  --color-surface-tertiary:  #e8e7dd;
  --color-surface-inverse:   #00001a;

  /* Text */
  --color-text-primary:   #0f0b12;
  --color-text-secondary: #252525;
  --color-text-tertiary:  #2a2a2a;
  --color-text-inverse:   #f9f9f2;
  --color-text-on-accent: #fffff2;

  /* Borders */
  --color-border-subtle:  #f9f9f2;
  --color-border-default: #e9efec;
  --color-border-strong:  #d3dfda;

  /* Action */
  --color-action-primary:          #316da1;
  --color-action-primary-hover:    #1e4881;
  --color-action-primary-text:     #f9f9f2;
  --color-action-secondary:        transparent;
  --color-action-secondary-border: #316da1;
  --color-action-secondary-hover:  #1e4881;
  --color-action-secondary-text:   #316da1;

  /* Status */
  --color-info-subtle:     var(--color-blue-10);
  --color-info-default:    #2E72D2;
  --color-info-strong:     #0F3D85;
  --color-info-text:       #082960;

  --color-success-subtle:  var(--color-green-10);
  --color-success-default: #22A85E;
  --color-success-strong:  #085F2E;
  --color-success-text:    #043D1D;

  --color-warning-subtle:  var(--color-yellow-10);
  --color-warning-default: #F0BC00;
  --color-warning-strong:  #966D00;
  --color-warning-text:    #664A00;

  --color-danger-subtle:   var(--color-red-10);
  --color-danger-default:  #276c65;
  --color-danger-strong:   #9A1E11;
  --color-danger-text:     #6E1009;

  /* Accent — Figma: Color/Accent/Default (teal) */
  --color-accent:           #016f6b;
  --color-accent-subtle:    #F5E8E4;
  --color-accent-text:      #b28b26;
  --color-accent-secondary: #b3fff1;
  --color-accent-tertiary:  #6dc5fd;

  /* Tag text — aliases Color/Status/Danger/Default (VariableID:17:21) */
  --color-tag-text: var(--color-danger-default);


  /* ─── Spacing ────────────────────────────────────────────────────────────── */
  --space-component-xs: var(--size-4);
  --space-component-sm: var(--size-8);
  --space-component-md: var(--size-12);
  --space-component-lg: var(--size-16);
  --space-component-xl: var(--size-24);

  --space-stack-xs: var(--size-4);
  --space-stack-sm: var(--size-8);
  --space-stack-md: var(--size-16);
  --space-stack-lg: var(--size-24);
  --space-stack-xl: var(--size-32);


  /* ─── Radius & Border ────────────────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-sm:     var(--size-2);
  --radius-md:     var(--size-4);
  --radius-lg:     var(--size-8);
  --radius-xl:     var(--size-12);
  --radius-pill:   9999px;
  --radius-circle: 50%;

  --border-width-thin:    0.5px;
  --border-width-default: 1px;
  --border-width-strong:  2px;


  /* ─── Elevation ──────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(26,25,23,0.06);
  --shadow-md:    0 4px 12px rgba(26,25,23,0.08);
  --shadow-lg:    0 12px 32px rgba(26,25,23,0.10);
  --shadow-xl:    0 24px 64px rgba(26,25,23,0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);


  /* ─── Component tokens ───────────────────────────────────────────────────── */
  --button-height-sm:    var(--size-24);
  --button-height-md:    var(--size-40);
  --button-height-lg:    var(--size-48);
  --button-padding-x-sm: var(--size-12);
  --button-padding-x-md: var(--size-16);
  --button-padding-x-lg: var(--size-24);
  --button-font-family:  var(--font-standard);
  --button-font-weight:  var(--weight-600);
  --button-radius:       var(--radius-sm);

  --input-height-md:   var(--size-40);
  --input-height-lg:   var(--size-48);
  --input-padding-x:   var(--size-16);
  --input-font-family: var(--font-standard);
  --input-radius:      var(--radius-md);

  --card-padding-sm: var(--size-16);
  --card-padding-md: var(--size-24);
  --card-padding-lg: var(--size-32);
  --card-radius:     var(--radius-lg);
  --card-border:     var(--border-width-thin) solid var(--color-border-subtle);

  --nav-height-sm: var(--size-48);
  --nav-height-lg: var(--size-56);


  /* ─── Responsive: sm (mobile default, < 640px) ──────────────────────────── */
  /* Values sourced from Figma Responsive variable collection.                */
  --container:          100%;
  --gutter:             var(--size-16);   /* Layout/Gutter sm = 16 */
  --space-section:      var(--size-40);   /* Space/Section sm = 40 */

  --text-display-size:  var(--size-40);   /* Display sm = 40 */
  --text-h1-size:       var(--size-40);   /* H1 sm = 40 */
  --text-h2-size:       var(--size-32);   /* H2 sm = 32 */
  --text-h3-size:       var(--size-24);   /* H3 sm = 24 */
  --text-h4-size:            var(--size-20);   /* H4 sm = 20 */
  --text-body-lg-size:       var(--size-18);   /* Body LG sm = 18 */
  --text-body-size:          var(--size-16);   /* Body Default sm = 16 */
  --text-body-small-size:    var(--size-12);   /* Body Small sm = 12 */
  --text-overline-size:      var(--size-18);   /* Overline sm = 18 */
  --text-label-size:         12px;             /* Label sm = 12 */

  /* Typography role tokens */
  --text-display-family:  var(--font-display);
  --text-display-weight:  var(--weight-600);
  --text-display-leading: var(--leading-tight);

  --text-h1-family:  var(--font-standard);
  --text-h1-weight:  var(--weight-600);
  --text-h1-leading: var(--leading-tight);

  --text-h2-family:  var(--font-standard);
  --text-h2-weight:  var(--weight-600);
  --text-h2-leading: var(--leading-snug);

  --text-h3-family:  var(--font-standard);
  --text-h3-weight:  var(--weight-600);
  --text-h3-leading: var(--leading-snug);

  --text-body-lg-family:  var(--font-standard);
  --text-body-lg-weight:  var(--weight-400);
  --text-body-lg-leading: var(--leading-relaxed);

  --text-body-family:  var(--font-standard);
  --text-body-weight:  var(--weight-300);
  --text-body-leading: var(--leading-normal);

  --text-body-small-family:  var(--font-standard);
  --text-body-small-weight:  var(--weight-200);
  --text-body-small-leading: var(--leading-normal);

  --text-overline-family:  var(--font-standard);
  --text-overline-weight:  var(--weight-200);
  --text-overline-leading: var(--leading-normal);

  --text-label-family:   var(--font-standard);
  --text-label-weight:   var(--weight-600);
  --text-label-leading:  var(--leading-normal);
  --text-label-tracking: var(--tracking-wider);
}


/* ─── Dark mode overrides ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-page:      #00001a;
    --color-surface-primary:   #01031d;
    --color-surface-secondary: #000019;
    --color-surface-tertiary:  #000021;
    --color-surface-inverse:   #fffff2;

    --color-text-primary:   #f9f9f2;
    --color-text-secondary: #e9efec;
    --color-text-tertiary:  #d3dfda;
    --color-text-inverse:   #0f0b12;
    --color-text-on-accent: #000010;

    --color-border-subtle:  #0f0b12;
    --color-border-default: #252525;
    --color-border-strong:  #2a2a2a;

    --color-action-primary:          #4ea2c6;
    --color-action-primary-hover:    #3e86b3;
    --color-action-primary-text:     #00001a;
    --color-action-secondary-border: #4ea2c6;
    --color-action-secondary-hover:  #3e86b3;
    --color-action-secondary-text:   #4ea2c6;

    --color-info-subtle:     var(--color-blue-160);
    --color-info-default:    #5E97E5;
    --color-info-strong:     #94BBF0;
    --color-info-text:       #C2D9F8;

    --color-success-subtle:  var(--color-green-160);
    --color-success-default: #52C885;
    --color-success-strong:  #8FE0B0;
    --color-success-text:    #C4F0D5;

    --color-warning-subtle:  var(--color-yellow-160);
    --color-warning-default: #FFD52E;
    --color-warning-strong:  #FFE870;
    --color-warning-text:    #FFF4B5;

    --color-danger-subtle:   var(--color-red-160);
    --color-danger-default:  #276c65;
    --color-danger-strong:   #FCA99F;
    --color-danger-text:     #FECDC7;

    --color-tag-text: #52b3a8;

    --color-accent:           #39b69f;
    --color-accent-subtle:    #2E1A15;
    --color-accent-text:      #baa130;
    --color-accent-secondary: #002e36;
    --color-accent-tertiary:  #053a86;

    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
}


/* ─── Responsive scaling ─────────────────────────────────────────────────── */
/* md: ≥ 640px — Figma md breakpoint */
@media (min-width: 640px) {
  :root {
    --container:         960px;
    --gutter:            var(--size-24);   /* Layout/Gutter md = 24 */
    --space-section:     var(--size-48);   /* Space/Section md = 48 */
    --text-display-size:     var(--size-56);
    --text-h1-size:          var(--size-54);   /* H1 md = 54 */
    --text-h2-size:          var(--size-48);   /* H2 md = 48 */
    --text-h3-size:          var(--size-32);   /* H3 md = 32 */
    --text-h4-size:          var(--size-24);   /* H4 md = 24 */
    --text-body-lg-size:     var(--size-18);   /* Body LG md = 18 */
    --text-body-size:        var(--size-16);   /* Body Default md = 16 */
    --text-body-small-size:  var(--size-14);   /* Body Small md = 14 */
    --text-overline-size:    var(--size-18);   /* Overline md = 18 */
    --text-label-size:       12px;
  }
}

/* lg: ≥ 1024px — Figma lg breakpoint */
@media (min-width: 1024px) {
  :root {
    --container:         1280px;
    --gutter:            var(--size-24);   /* Layout/Gutter lg = 24 (Figma: same as md) */
    --space-section:     var(--size-64);   /* Space/Section lg = 64 */
    --text-display-size:     var(--size-64);   /* Display lg = 64 */
    --text-h1-size:          var(--size-54);   /* H1 lg = 54 */
    --text-h2-size:          var(--size-54);   /* H2 lg = 54 */
    --text-h3-size:          var(--size-40);   /* H3 lg = 40 */
    --text-h4-size:          var(--size-24);   /* H4 lg = 24 */
    --text-body-lg-size:     var(--size-18);   /* Body LG lg = 18 */
    --text-body-size:        var(--size-16);   /* Body Default lg = 16 (no upgrade until xl) */
    --text-body-small-size:  var(--size-14);   /* Body Small lg = 14 */
    --text-overline-size:    var(--size-18);   /* Overline lg = 18 */
    --text-label-size:       12px;
  }
}

/* xl: ≥ 1440px — Figma xl breakpoint */
@media (min-width: 1440px) {
  :root {
    --container:         1600px;
    --gutter:            var(--size-32);   /* Layout/Gutter xl = 32 */
    --space-section:     var(--size-80);   /* Space/Section xl = 80 */
    --text-display-size:     var(--size-80);   /* Display xl = 80 */
    --text-h1-size:          var(--size-64);   /* H1 xl = 64 */
    --text-h2-size:          var(--size-60);   /* H2 xl = 60 */
    --text-h3-size:          var(--size-48);   /* H3 xl = 48 */
    --text-h4-size:          var(--size-24);   /* H4 xl = 24 */
    --text-body-lg-size:     var(--size-20);   /* Body LG xl = 20 */
    --text-body-size:        var(--size-18);   /* Body Default xl = 18 */
    --text-body-small-size:  var(--size-16);   /* Body Small xl = 16 */
    --text-overline-size:    var(--size-20);   /* Overline xl = 20 */
    --text-label-size:       14px;
  }
}

/* 2xl: ≥ 2000px — Figma 2xl breakpoint */
@media (min-width: 2000px) {
  :root {
    --container:         2400px;
    --gutter:            var(--size-48);   /* Layout/Gutter 2xl = 48 */
    --space-section:     var(--size-96);   /* Space/Section 2xl = 96 */
    --text-display-size:     var(--size-96);   /* Display 2xl = 96 */
    --text-h1-size:          var(--size-72);   /* H1 2xl = 72 */
    --text-h2-size:          var(--size-64);   /* H2 2xl = 64 */
    --text-h3-size:          var(--size-54);   /* H3 2xl = 54 */
    --text-h4-size:          var(--size-24);   /* H4 2xl = 24 */
    --text-body-lg-size:     var(--size-20);   /* Body LG 2xl = 20 */
    --text-body-size:        var(--size-18);   /* Body Default 2xl = 18 */
    --text-body-small-size:  var(--size-16);   /* Body Small 2xl = 16 */
    --text-overline-size:    var(--size-20);   /* Overline 2xl = 20 */
    --text-label-size:       14px;
  }
}