/* ============================================================================
   SUPERMAXX — TOKEN LAYER
   ONE locked brand. No light/dark toggle, no accent presets — the constraint
   IS the polish. Phosphor chrome (the frame: sidebar + topbar) wraps a calm
   near-black canvas so the CREATIVE is the hero, never the UI. Mirrors the
   supermaxx.ai login world. Components read semantics only.
   ========================================================================== */

/* ---- Theme-independent primitives: type, space, radius, motion, z ---- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Berkeley Mono", Menlo, monospace;
  --font-brand: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type ramp (sizes; weight/leading applied in app.css) */
  --fs-display: 32px;
  --fs-title: 24px;
  --fs-heading: 18px;
  --fs-subhead: 15px;
  --fs-body-lg: 16px;
  --fs-body: 14px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;
  --fs-mono: 13px;

  /* spacing — 4px grid */
  --space-0_5: 2px;  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;   --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px;  --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --space-32: 128px;

  /* radius — three-radius discipline + concentric */
  --radius-xs: 4px;
  --radius-sm: 6px;   /* control / button */
  --radius-md: 8px;   /* input */
  --radius-lg: 12px;  /* card */
  --radius-xl: 16px;  /* modal */
  --radius-pill: 9999px;

  /* motion */
  --dur-micro: 120ms;
  --dur-short: 180ms;
  --dur-base: 220ms;
  --dur-long: 320ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* z-index scale */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* layout constants */
  --sidebar-w: 240px;
  --rail-w: 64px;
  --topbar-h: 56px;
  --content-max: 1400px;
}

/* ============================================================================
   SUPERMAXX — LOCKED SEMANTIC LAYER (phosphor chrome · calm canvas)
   Reference world (login): bg #060806 · phosphor text #b9e8c6 · accent #57a06c
   · glow #7ee896 · hairline rgba(126,232,150,·). Values are literal (not OKLCH)
   to stay pixel-consistent with the auth gate and predictable to contrast QA.
   ========================================================================== */
:root {
  /* CHROME — the phosphor frame (sidebar + topbar + brand). Darker than the
     canvas so it recedes and the work surface reads as "forward". */
  --chrome:         #070b08;
  --chrome-2:       #0b120d;
  --chrome-border:  rgba(126, 232, 150, 0.12);
  --chrome-text:    #b9e8c6;
  --chrome-glow:    0 0 22px rgba(126, 232, 150, 0.28);

  /* CANVAS + surfaces — calm near-black, a whisper of green so it belongs to the
     same world without casting color on the creative. */
  --bg:            #0b0f0c;
  --surface-1:     #121a15;   /* cards lift off the canvas */
  --surface-2:     #18211b;   /* hover / nested */
  --surface-3:     #1f2a23;   /* deepest nest */

  --border:        rgba(126, 232, 150, 0.10);
  --border-input:  rgba(126, 232, 150, 0.18);
  --border-strong: rgba(126, 232, 150, 0.34);

  --text:           #e8f5ec;
  --text-secondary: #9cbca6;
  --text-muted:     #6f9a7b;

  --accent:       #57a06c;
  --accent-hover: #64b079;
  --on-accent:    #04120a;   /* dark text on the green fill — matches login CONTINUE */
  --accent-text:  #7ee896;   /* bright phosphor for active states + links */
  --accent-tint:  rgba(126, 232, 150, 0.12);
  --focus:        #7ee896;

  --success-fill: #57a06c;
  --success-text: #7ee896;
  --warning-fill: #d9a65a;
  --warning-on:   #04120a;
  --warning-text: #e8c98a;
  --danger-fill:  #c65b57;
  --danger-on:    #fff5f4;
  --danger-text:  #e8918e;

  --tile-inset: rgb(255 255 255 / .06);
  --scrim: rgb(2 5 3 / .64);

  --shadow-overlay: 0 0 0 1px rgba(126, 232, 150, .07), 0 10px 30px rgb(0 0 0 / .5);
  --shadow-lift:    0 0 0 1px rgba(126, 232, 150, .05);
  color-scheme: dark;
}