/* ==========================================================================
   Tramontane — design tokens
   Light is the default. Dark applies via [data-theme="dark"] (the theme toggle).
   ========================================================================== */


:root {
  /* ---- Typefaces ------------------------------------------------------- */
  --tm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tm-font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale (size / line-height / tracking) ---------------------- */
  --tm-display-xl: clamp(48px, 9vw, 128px);   --tm-display-xl-lh: 0.95;  --tm-display-xl-ls: -0.065em;
  --tm-display-l:  clamp(40px, 5.6vw, 72px);  --tm-display-l-lh: 1.02;   --tm-display-l-ls: -0.06em;
  --tm-h2:         clamp(34px, 4vw, 52px);    --tm-h2-lh: 1.05;          --tm-h2-ls: -0.055em;
  --tm-h3:         24px;                      --tm-h3-lh: 1.2;           --tm-h3-ls: -0.02em;
  --tm-h4:         15px;                      --tm-h4-lh: 1.3;
  --tm-body-l:     19px;                      --tm-body-l-lh: 1.55;
  --tm-body:       16px;                      --tm-body-lh: 1.6;
  --tm-body-s:     14px;                      --tm-body-s-lh: 1.5;
  --tm-ui:         13px;                      /* mono chrome: nav, buttons, labels */
  --tm-caption:    12px;                      /* mono meta: timestamps, eyebrows */
  --tm-micro:      11px;                      /* mono dividers, tags */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --tm-space-1: 4px;   --tm-space-2: 8px;   --tm-space-3: 12px;  --tm-space-4: 16px;
  --tm-space-5: 20px;  --tm-space-6: 24px;  --tm-space-7: 28px;  --tm-space-8: 32px;
  --tm-space-10: 40px; --tm-space-12: 48px; --tm-space-14: 56px; --tm-space-18: 72px;
  --tm-space-24: 96px;

  /* ---- Layout ---------------------------------------------------------- */
  --tm-container: 1240px;
  --tm-gutter: 24px;
  --tm-section-y: 96px;
  --tm-sidebar-w: 320px;

  /* ---- Shape ----------------------------------------------------------- */
  --tm-radius: 0;          /* everything is square */
  --tm-radius-dot: 50%;    /* status dots and window lights only */
  --tm-border: 1px;
  --tm-border-active: 2px; /* active tab underline, highlighted table column */

  /* ---- Elevation (floating windows only) ------------------------------- */
  --tm-shadow-window: 0 30px 80px -40px rgba(0, 0, 0, 0.5);

  /* ---- Motion ---------------------------------------------------------- */
  --tm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tm-dur-fast: 120ms;
  --tm-dur: 200ms;
  --tm-dur-drift: 14s;     /* streamline drift loop */

  /* ---- Brand constants (theme-independent) ----------------------------- */
  --tm-sky-200: #8EC5FF;
  --tm-sky-600: #1F5ED6;

  /* ---- Color: LIGHT (default) ----------------------------------------- */

  color-scheme: light;
  --tm-bg:            #F4F6F5;
  --tm-surface:       #FFFFFF;
  --tm-surface-sunk:  #ECEFED;
  --tm-raised:        #E2E6E3;
  --tm-raised-strong: #CDD3CF;
  --tm-line:          #DFE3E0;
  --tm-line-strong:   #C3CAC6;
  --tm-text:          #121615;
  --tm-text-muted:    #545B58;
  --tm-text-subtle:   #5F6763;
  --tm-accent:        #1F5ED6;
  --tm-accent-text:   #1F5ED6;
  --tm-on-accent:     #FFFFFF;
  --tm-success:       #2E7A3A;
  --tm-success-line:  rgba(46, 122, 58, 0.4);
  --tm-warning:       #875E00;
  --tm-danger:        #C2362B;
  --tm-shadow-window: 0 30px 80px -40px rgba(18, 22, 21, 0.28);
}

/* ---- Color: DARK, via [data-theme="dark"] ------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --tm-bg:            #141414;
  --tm-surface:       #1B1B1B;   /* panels, cards, windows */
  --tm-surface-sunk:  #181818;   /* sidebars, list columns */
  --tm-raised:        #262626;   /* selected row, avatar, hover */
  --tm-raised-strong: #3A3A3A;   /* chart misses, window lights */
  --tm-line:          #2B2B2B;   /* all hairlines and borders */
  --tm-line-strong:   #454545;   /* streamlines, input focus ring base */
  --tm-text:          #ECEBE8;
  --tm-text-muted:    #9D9B97;   /* secondary copy */
  --tm-text-subtle:   #86847F;   /* timestamps, placeholders, meta */
  --tm-accent:        #8EC5FF;   /* sky: one per view, used sparingly */
  --tm-accent-text:   #8EC5FF;   /* accent when used as text */
  --tm-on-accent:     #06121F;
  --tm-success:       #86C281;   /* live, ready, "new" */
  --tm-success-line:  rgba(134, 194, 129, 0.35);
  --tm-warning:       #E3C26B;   /* building, queued */
  --tm-danger:        #FF7A6E;   /* failed, error */
  --tm-shadow-window: 0 30px 80px -40px rgba(0, 0, 0, 0.5);
}