/* SandOS — design tokens.
 * Dark, matte, muted. Synthesized from the ui-ux-pro-max design system
 * (dark operations dashboard, status-color strategy, Inter) and the project
 * style brief (matte slate surfaces — not OLED black — and muted accents). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces — matte slate */
  --bg:            #0f1419;
  --bg-elevated:   #12171f;
  --surface:       #161c25;
  --surface-2:     #1c232f;
  --surface-3:     #232c3a;
  --border:        #2a3340;
  --border-strong: #3a4655;

  /* Text */
  --text:        #e6e9ee;
  --text-muted:  #9aa6b4;
  --text-faint:  #6b7787;
  --text-invert: #0f1419;

  /* Muted accents */
  --green:  #45b98a;
  --blue:   #5b9bd5;
  --purple: #9b87d4;
  --cyan:   #4fb6c9;
  --amber:  #d3a44e;
  --red:    #d8716f;

  /* Low-alpha accent fills for badges, callouts, selected rows */
  --green-bg:  rgba(69, 185, 138, .13);
  --blue-bg:   rgba(91, 155, 213, .13);
  --purple-bg: rgba(155, 135, 212, .13);
  --cyan-bg:   rgba(79, 182, 201, .13);
  --amber-bg:  rgba(211, 164, 78, .13);
  --red-bg:    rgba(216, 113, 111, .14);
  --neutral-bg: rgba(154, 166, 180, .10);

  /* Semantic roles */
  --accent:       var(--blue);
  --accent-hover: #6fa9dd;
  --ok:           var(--green);
  --warn:         var(--amber);
  --danger:       var(--red);
  --focus-ring:   rgba(91, 155, 213, .6);

  /* Typography */
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-xs:   .75rem;     /* 12 */
  --fs-sm:   .8125rem;   /* 13 */
  --fs-base: .9375rem;   /* 15 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */

  /* Spacing — 4px scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;  --s10: 40px; --s12: 48px;

  /* Radius — modest, intentional */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;

  /* Elevation */
  --shadow-1:      0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2:      0 6px 20px rgba(0, 0, 0, .38);
  --shadow-pop:    0 16px 40px rgba(0, 0, 0, .55);
  --shadow-accent: 0 0 0 3px rgba(91, 155, 213, .18), 0 4px 16px rgba(91, 155, 213, .12);

  /* Motion */
  --ease:     cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur:      160ms;
  --dur-slow: 280ms;

  /* Layout */
  --sidebar-w:  240px;
  --header-h:   56px;
  --content-max: 1200px;

  /* Z-index scale */
  --z-sticky:  20;
  --z-scrim:   40;
  --z-drawer:  50;
  --z-modal:   100;
  --z-toast:   1000;
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #f0f2f5;
  --bg-elevated:   #f8f9fb;
  --surface:       #ffffff;
  --surface-2:     #eef0f4;
  --surface-3:     #e4e7ed;
  --border:        #d0d5dd;
  --border-strong: #aab0bc;

  --text:        #1a202c;
  --text-muted:  #4a5568;
  --text-faint:  #718096;
  --text-invert: #ffffff;

  --green:  #1a7a50;
  --blue:   #2563c4;
  --purple: #6c48b8;
  --cyan:   #0e7490;
  --amber:  #a16207;
  --red:    #b91c1c;

  --green-bg:   rgba(26, 122, 80,   .10);
  --blue-bg:    rgba(37, 99,  196,  .10);
  --purple-bg:  rgba(108, 72, 184,  .10);
  --cyan-bg:    rgba(14, 116, 144,  .10);
  --amber-bg:   rgba(161, 98,  7,   .10);
  --red-bg:     rgba(185, 28, 28,   .10);
  --neutral-bg: rgba(71,  85, 105,  .08);

  --accent:       var(--blue);
  --accent-hover: #1d4fb0;
  --ok:           var(--green);
  --warn:         var(--amber);
  --danger:       var(--red);
  --focus-ring:   rgba(37, 99, 196, .5);

  --shadow-1:      0 1px 3px rgba(0, 0, 0, .10);
  --shadow-2:      0 4px 16px rgba(0, 0, 0, .10);
  --shadow-pop:    0 12px 32px rgba(0, 0, 0, .18);
  --shadow-accent: 0 0 0 3px rgba(37, 99, 196, .20), 0 4px 16px rgba(37, 99, 196, .10);
}

/* ── Midnight theme (OLED black) ─────────────────────────────────────────── */
[data-theme="midnight"] {
  color-scheme: dark;

  --bg:            #000000;
  --bg-elevated:   #080808;
  --surface:       #0d0d0d;
  --surface-2:     #121212;
  --surface-3:     #1a1a1a;
  --border:        #1e1e1e;
  --border-strong: #2c2c2c;

  --text:        #f0f2f5;
  --text-muted:  #9aa6b4;
  --text-faint:  #5a6475;
  --text-invert: #000000;

  --green:  #3daa7a;
  --blue:   #4d8fd1;
  --purple: #8f74cc;
  --cyan:   #3fafc0;
  --amber:  #c99640;
  --red:    #d46260;

  --green-bg:   rgba(61, 170, 122,  .12);
  --blue-bg:    rgba(77, 143, 209,  .12);
  --purple-bg:  rgba(143, 116, 204, .12);
  --cyan-bg:    rgba(63, 175, 192,  .12);
  --amber-bg:   rgba(201, 150, 64,  .12);
  --red-bg:     rgba(212, 98,  96,  .12);
  --neutral-bg: rgba(154, 166, 180, .08);

  --accent:       var(--blue);
  --accent-hover: #6aa3dc;
  --ok:           var(--green);
  --warn:         var(--amber);
  --danger:       var(--red);
  --focus-ring:   rgba(77, 143, 209, .55);

  --shadow-1:      0 1px 2px rgba(0, 0, 0, .60);
  --shadow-2:      0 6px 20px rgba(0, 0, 0, .65);
  --shadow-pop:    0 16px 40px rgba(0, 0, 0, .80);
  --shadow-accent: 0 0 0 3px rgba(77, 143, 209, .20), 0 4px 16px rgba(77, 143, 209, .14);
}