/* ============================================================
   ALEX TRACKS — Colors & Type Foundations
   Last updated: 2026-05-08
   Source: AT Design System 8 May 2026
   ============================================================ */

/* ---------- Webfonts ----------
   IBM Plex Sans Thai (local TTFs in /fonts/) covers both Latin and Thai
   glyphs, so we register it under BOTH the "IBM Plex Sans" and
   "IBM Plex Sans Thai" family names — that way prototypes can keep using
   `font-family: "IBM Plex Sans"` without a Google Fonts request.
   IBM Plex Mono is still pulled from Google Fonts (no local file supplied). */

@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Light.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Light.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/IBMPlexSansThai-Bold.ttf") format("truetype");
}

/* IBM Plex Mono — Google Fonts (no local file supplied) */


:root {
  /* ============================================================
     COLOR — Raw palette (named swatches)
     ============================================================ */

  /* Dark neutrals — the brand lives on dark surfaces */
  --at-off-black:  #0B0D10;  /* Default app background */
  --at-charcoal:   #111418;  /* Surface / large cards   */
  --at-slate:      #1A1D22;  /* Raised surface / panels */
  --at-stone:      #2A2E35;  /* Hairline borders, chips */

  /* Brand accents */
  --at-sand:       #CBB79D;  /* Primary accent — warm, premium */
  --at-sage:       #5CB663;  /* Secondary — wellness / positive */
  --at-steel-blue: #4B5D6E;  /* Tertiary — data / analytical    */

  /* Light neutrals */
  --at-cloud:      #E6E8EC;  /* Body text on dark, light surface */
  --at-white:      #F7F8FA;  /* Pure light, headings on dark     */

  /* Semantic state colors (derived) */
  --at-success: var(--at-sage);
  --at-warning: #E0A458;        /* warm amber, sand-adjacent      */
  --at-danger:  #D9645C;        /* muted terracotta               */
  --at-info:    var(--at-steel-blue);

  /* Alpha utilities — used for hover, divider, scrim */
  --at-white-04: rgba(247, 248, 250, 0.04);
  --at-white-08: rgba(247, 248, 250, 0.08);
  --at-white-12: rgba(247, 248, 250, 0.12);
  --at-white-24: rgba(247, 248, 250, 0.24);
  --at-white-60: rgba(247, 248, 250, 0.60);
  --at-black-40: rgba(11, 13, 16, 0.40);
  --at-black-60: rgba(11, 13, 16, 0.60);

  /* ============================================================
     COLOR — Semantic tokens (use these in product code)
     ============================================================ */

  /* Backgrounds */
  --bg-canvas:    var(--at-off-black);   /* page background      */
  --bg-surface:   var(--at-charcoal);    /* cards                */
  --bg-raised:    var(--at-slate);       /* nested / elevated    */
  --bg-sunken:    #07090B;               /* inset wells          */
  --bg-input:     var(--at-charcoal);
  --bg-overlay:   rgba(11, 13, 16, 0.72);

  /* Foreground (text + icons) */
  --fg-1: var(--at-white);                /* primary text         */
  --fg-2: var(--at-cloud);                /* body text            */
  --fg-3: rgba(230, 232, 236, 0.64);      /* secondary text       */
  --fg-4: rgba(230, 232, 236, 0.40);      /* tertiary / disabled  */
  --fg-on-sand: var(--at-off-black);      /* text on sand fills   */

  /* Borders */
  --border-subtle:  rgba(247, 248, 250, 0.06);
  --border-default: rgba(247, 248, 250, 0.10);
  --border-strong:  rgba(247, 248, 250, 0.18);
  --border-focus:   var(--at-sand);

  /* Accents — semantic */
  --accent-primary:   var(--at-sand);
  --accent-secondary: var(--at-sage);
  --accent-tertiary:  var(--at-steel-blue);

  /* Tinted backgrounds for badges / metric tiles */
  --tint-sand:  rgba(203, 183, 157, 0.14);
  --tint-sage:  rgba(92, 182, 99, 0.14);
  --tint-steel: rgba(75, 93, 110, 0.18);

  /* ============================================================
     GRADIENTS & OVERLAYS
     ============================================================ */
  --gradient-warm-neutral: linear-gradient(90deg, #CBB79D 0%, #8C7C68 100%);
  --gradient-sage-fade:    linear-gradient(90deg, #5C7B5E 0%, #2A3A2C 100%);
  --gradient-steel-fade:   linear-gradient(90deg, #4B5D6E 0%, #1F2A33 100%);
  --gradient-dark-overlay: linear-gradient(180deg, rgba(11,13,16,0) 0%, rgba(11,13,16,0.85) 100%);
  --gradient-protect-top:  linear-gradient(180deg, rgba(11,13,16,0.85) 0%, rgba(11,13,16,0) 100%);

  /* ============================================================
     TYPE — Raw families
     ============================================================ */
  --font-sans:    "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-thai:    "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     TYPE — Semantic scale (display / heading / body / caption)
     Sizes follow an 8pt rhythm; line-heights are unitless.
     ============================================================ */
  --text-display-size:   56px;
  --text-display-lh:     1.06;
  --text-display-tracking: -0.02em;
  --text-display-weight: var(--fw-bold);

  --text-h1-size: 40px;
  --text-h1-lh:   1.12;
  --text-h1-tracking: -0.015em;
  --text-h1-weight: var(--fw-semibold);

  --text-h2-size: 28px;
  --text-h2-lh:   1.2;
  --text-h2-weight: var(--fw-semibold);

  --text-h3-size: 20px;
  --text-h3-lh:   1.3;
  --text-h3-weight: var(--fw-semibold);

  --text-body-size: 16px;
  --text-body-lh:   1.55;
  --text-body-weight: var(--fw-regular);

  --text-body-sm-size: 14px;
  --text-body-sm-lh:   1.5;

  --text-caption-size: 12px;
  --text-caption-lh:   1.4;
  --text-caption-tracking: 0.02em;
  --text-caption-weight: var(--fw-light);

  --text-overline-size: 11px;
  --text-overline-tracking: 0.16em;
  --text-overline-weight: var(--fw-medium);

  /* Numeric / metric-tile readout (large stats) */
  --text-metric-size: 48px;
  --text-metric-lh:   1;
  --text-metric-weight: var(--fw-bold);
  --text-metric-tracking: -0.02em;

  /* ============================================================
     SPACING — 8pt base (also includes 4 for hairline gaps)
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 128px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION (shadows) — subtle on dark surfaces
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 1px rgba(0,0,0,0.18);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.36), 0 2px 4px rgba(0,0,0,0.22);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30);
  --shadow-focus: 0 0 0 3px rgba(203, 183, 157, 0.35);

  /* Inner glow used on inputs on focus */
  --shadow-inset-1: inset 0 0 0 1px rgba(247, 248, 250, 0.10);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
}

/* ============================================================
   BASE — typographic defaults
   These map the semantic scale onto real elements so prototypes
   only need <h1>, <p> etc. and they look right out of the box.
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--fg-2);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, .at-display {
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-tracking);
  font-weight: var(--text-display-weight);
  color: var(--fg-1);
}

h1, .at-h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-tracking);
  font-weight: var(--text-h1-weight);
  color: var(--fg-1);
}
h2, .at-h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: var(--text-h2-weight);
  color: var(--fg-1);
}
h3, .at-h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--text-h3-weight);
  color: var(--fg-1);
}

p, .at-body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--fg-2);
}

.at-body-sm {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--fg-2);
}

.at-caption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-lh);
  letter-spacing: var(--text-caption-tracking);
  font-weight: var(--text-caption-weight);
  color: var(--fg-3);
}

.at-overline {
  font-size: var(--text-overline-size);
  letter-spacing: var(--text-overline-tracking);
  font-weight: var(--text-overline-weight);
  text-transform: uppercase;
  color: var(--fg-3);
}

.at-metric {
  font-family: var(--font-sans);
  font-size: var(--text-metric-size);
  line-height: var(--text-metric-lh);
  letter-spacing: var(--text-metric-tracking);
  font-weight: var(--text-metric-weight);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

code, kbd, pre, .at-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Focus ring — sand accent for dark surfaces */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}