/* ============================================================
   Alphamind Design Tokens — tokens.css
   v1.0.0 · Brand → Semantic → Component (3-tier)
   Spec: ./DESIGN-TOKENS-GUIDELINE.md
   Rule: components reference Tier 2/3 only — never Tier 1, never raw hex/px.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     TIER 1 — PRIMITIVE / BRAND  (raw, immutable)
     --------------------------------------------------------- */

  /* brand color */
  --am-navy-900: #00145b;   /* primary dark */
  --am-navy-800: #081d6e;
  --am-navy-700: #13307f;
  --am-royal-500: #0e2a8c;  /* secondary */
  --am-royal-600: #0a2074;
  --am-yellow-500: #fef301; /* accent / action */
  --am-yellow-600: #e0d400;
  --am-red-500: #f42e4b;    /* pop / danger */
  --am-red-600: #d61f3c;

  /* neutral (navy-tinted) */
  --am-white: #ffffff;
  --am-grey-50:  #f7f7f8;
  --am-grey-100: #f2f2f2;
  --am-grey-200: #e6e7e8;
  --am-grey-300: #d4d6dc;
  --am-grey-400: #aab1c0;
  --am-grey-500: #7c8499;
  --am-grey-600: #56607a;
  --am-grey-700: #3a445e;
  --am-grey-900: #0b1020;

  /* functional (extension, not brand) */
  --am-success-500: #1e8a5a;
  --am-warning-500: #c77a00;
  --am-info-500:    #0e2a8c;
  --am-danger-500:  #f42e4b;

  /* typography */
  --am-font-sans: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --am-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --am-weight-light: 300;   --am-weight-regular: 400;  --am-weight-medium: 500;
  --am-weight-semibold: 600; --am-weight-bold: 700;    --am-weight-extrabold: 800;
  --am-weight-black: 900;

  /* modular scale 1.333, base 16px */
  --am-size-3xs: 0.69rem;   /* 11 */
  --am-size-2xs: 0.75rem;   /* 12 */
  --am-size-xs:  0.875rem;  /* 14 */
  --am-size-sm:  1rem;      /* 16 — body floor */
  --am-size-md:  1.25rem;   /* 20 */
  --am-size-lg:  1.563rem;  /* 25 */
  --am-size-xl:  2.083rem;  /* 33 */
  --am-size-2xl: 2.777rem;  /* 44 */
  --am-size-3xl: 3.7rem;    /* 59 */

  --am-leading-tight: 1.15; --am-leading-snug: 1.3;
  --am-leading-normal: 1.6; --am-leading-relaxed: 1.85;

  --am-tracking-tight: -0.01em; --am-tracking-normal: 0;
  --am-tracking-wide: 0.06em;   --am-tracking-caps: 0.14em;

  /* space — 8px grid (4px sub) */
  --am-space-0: 0;       --am-space-1: 0.25rem; --am-space-2: 0.5rem;
  --am-space-3: 0.75rem; --am-space-4: 1rem;    --am-space-5: 1.5rem;
  --am-space-6: 2rem;    --am-space-7: 3rem;    --am-space-8: 4rem;
  --am-space-9: 6rem;    --am-space-10: 8rem;

  /* radius */
  --am-radius-xs: 6px;  --am-radius-sm: 10px; --am-radius-md: 14px;
  --am-radius-lg: 18px; --am-radius-xl: 28px; --am-radius-pill: 100px; --am-radius-full: 9999px;

  /* border width */
  --am-border-1: 1px; --am-border-2: 2px; --am-border-3: 3px; --am-border-accent: 5px;

  /* shadow (navy-tinted) */
  --am-shadow-sm: 0 1px 2px rgba(0,20,91,.06);
  --am-shadow-md: 0 6px 16px rgba(0,20,91,.08);
  --am-shadow-lg: 0 18px 40px rgba(0,20,91,.12);

  /* z-index */
  --am-z-base: 0; --am-z-raised: 10; --am-z-sticky: 40;
  --am-z-overlay: 50; --am-z-modal: 60; --am-z-toast: 70;

  /* motion */
  --am-duration-instant: 100ms; --am-duration-fast: 200ms;
  --am-duration-base: 300ms;    --am-duration-slow: 500ms;
  --am-ease-out: cubic-bezier(0.22,1,0.36,1);
  --am-ease-in-out: cubic-bezier(0.65,0,0.35,1);

  /* breakpoints (for reference in JS/container queries) */
  --am-screen-sm: 375px; --am-screen-md: 768px; --am-screen-lg: 1024px; --am-screen-xl: 1440px;

  /* opacity */
  --am-opacity-disabled: 0.5; --am-opacity-muted: 0.7; --am-opacity-hover: 0.92;


  /* ---------------------------------------------------------
     TIER 2 — SEMANTIC / ALIAS  (roles — theme-able)
     This is what components reference.
     --------------------------------------------------------- */

  /* color · text */
  --color-text:         var(--am-navy-900);
  --color-text-muted:   var(--am-grey-600);
  --color-text-inverse: var(--am-white);

  /* color · surface */
  --color-surface:        var(--am-grey-100);
  --color-surface-raised: var(--am-white);
  --color-surface-sunken: var(--am-grey-200);
  --color-surface-inverse: var(--am-navy-900);

  /* color · border */
  --color-border:      rgba(0,20,91,.13);
  --color-border-soft: rgba(0,20,91,.07);

  /* color · action & accent */
  --color-action:           var(--am-yellow-500);
  --color-on-action:        var(--am-navy-900);
  --color-action-hover:     var(--am-yellow-600);
  --color-action-secondary: var(--am-royal-500);
  --color-accent:           var(--am-red-500);   /* numbers / pop / emphasis */
  --color-highlight:        var(--am-yellow-500);/* marker behind text */
  --color-focus:            var(--am-royal-500);

  /* color · feedback */
  --color-success: var(--am-success-500);
  --color-warning: var(--am-warning-500);
  --color-danger:  var(--am-danger-500);
  --color-info:    var(--am-info-500);

  /* typography roles (size / weight / leading / tracking) */
  --text-display-size: var(--am-size-2xl);  --text-display-weight: var(--am-weight-black);
  --text-display-leading: var(--am-leading-tight); --text-display-tracking: var(--am-tracking-tight);

  --text-headline-size: var(--am-size-xl);  --text-headline-weight: var(--am-weight-extrabold);
  --text-headline-leading: var(--am-leading-tight);

  --text-title-size: var(--am-size-lg);     --text-title-weight: var(--am-weight-bold);
  --text-title-leading: var(--am-leading-snug);

  --text-subtitle-size: var(--am-size-md);  --text-subtitle-weight: var(--am-weight-medium);

  --text-body-size: var(--am-size-sm);      --text-body-weight: var(--am-weight-regular);
  --text-body-leading: var(--am-leading-relaxed);

  --text-label-size: var(--am-size-3xs);    --text-label-weight: var(--am-weight-semibold);
  --text-label-tracking: var(--am-tracking-caps);

  /* space · rhythm */
  --space-inset-sm: var(--am-space-3);
  --space-inset-md: var(--am-space-5);
  --space-stack:    var(--am-space-4);
  --space-section:  var(--am-space-9);
  --space-gutter:   var(--am-space-4);

  /* radius · elevation · motion roles */
  --radius-control: var(--am-radius-sm);
  --radius-card:    var(--am-radius-lg);
  --radius-pill:    var(--am-radius-pill);
  --elevation-card: var(--am-shadow-sm);
  --elevation-pop:  var(--am-shadow-md);
  --motion-ui:      var(--am-duration-fast) var(--am-ease-out);


  /* ---------------------------------------------------------
     TIER 3 — COMPONENT  (optional, references Tier 2)
     --------------------------------------------------------- */

  /* button (primary) */
  --btn-bg:       var(--color-action);
  --btn-fg:       var(--color-on-action);
  --btn-bg-hover: var(--color-action-hover);
  --btn-radius:   var(--radius-pill);
  --btn-pad-y:    var(--am-space-3);
  --btn-pad-x:    var(--am-space-5);

  /* card */
  --card-bg:     var(--color-surface-raised);
  --card-border: var(--color-border);
  --card-radius: var(--radius-card);
  --card-pad:    var(--space-inset-md);
  --card-shadow: var(--elevation-card);

  /* input */
  --input-bg:     var(--color-surface-raised);
  --input-border: var(--color-border);
  --input-radius: var(--radius-control);
  --input-focus:  var(--color-focus);
}

/* ===========================================================
   DARK THEME — override Tier 2 ONLY (Tier 1 & components untouched)
   =========================================================== */
[data-theme="dark"] {
  --color-text:           var(--am-grey-100);
  --color-text-muted:     var(--am-grey-400);
  --color-surface:        var(--am-navy-900);
  --color-surface-raised: #0a1f6e;
  --color-surface-sunken: #061449;
  --color-border:         rgba(255,255,255,.14);
  --color-border-soft:    rgba(255,255,255,.08);
  /* action stays yellow (works on dark); accent stays red */
}

/* ===========================================================
   OPTIONAL — ready-made component classes using the tokens
   =========================================================== */
.am-btn{
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--am-font-sans); font-weight: var(--am-weight-extrabold);
  cursor: pointer; transition: background var(--motion-ui);
}
.am-btn:hover{ background: var(--btn-bg-hover); }
.am-btn:focus-visible{ outline: var(--am-border-3) solid var(--color-focus); outline-offset: 3px; }

.am-card{
  background: var(--card-bg); border: var(--am-border-1) solid var(--card-border);
  border-radius: var(--card-radius); padding: var(--card-pad); box-shadow: var(--card-shadow);
}

.am-text-body{ font: var(--text-body-weight) var(--text-body-size)/var(--text-body-leading) var(--am-font-sans); color: var(--color-text); }
.am-text-label{ font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-text-muted); }
.am-highlight{ background: linear-gradient(180deg, transparent 60%, var(--color-highlight) 60%); }
.am-accent{ color: var(--color-accent); font-variant-numeric: tabular-nums; }