/* =================================================================
   SACRED STUDIOS — Brand & Theme Tokens
   The single source of truth for color, type, spacing, and motion.
   ================================================================= */

:root {
  /* ---- Surfaces: Midnight (Sacred brand background) ---- */
  --bg-0: #0a0b10;
  --bg-1: #101117;
  --bg-2: #14151a;
  --bg-3: #1d1f27;
  --bg-glass: rgba(20, 21, 26, 0.66);
  --bg-glass-strong: rgba(29, 31, 39, 0.9);

  --border: rgba(237, 231, 218, 0.10);
  --border-strong: rgba(237, 231, 218, 0.22);

  /* ---- Text: Linen on midnight; pure white is the internal tell ---- */
  --text-0: #ffffff;
  --text-1: #ede7da;
  --text-2: #b7b0a3;
  --text-3: #837c70;
  --text-dim: #585249;

  /* ---- Sacred accent: Crimson (brand primary #C41230) ---- */
  --accent: #c41230;
  --accent-2: #d81b3a;
  --accent-3: #8e0c22;
  --accent-glow: rgba(196, 18, 48, 0.35);

  /* ---- Warm secondary: Gold / brass (#C8A158) ---- */
  --ember: #c8a158;
  --ember-2: #d8b36a;
  --ember-glow: rgba(200, 161, 88, 0.30);

  --gold: #c8a158;
  --emerald: #4ade80;
  --azure: #60a5fa;
  --rose: #cd364f;
  --crimson: #c41230;
  --amber: #d8b36a;
  --amber-soft: rgba(200, 161, 88, 0.16);

  /* ---- Internal identity: pure white + a brighter red (our 4th/5th brand colors) ----
     The back-of-house signal. The CHROME (top hairline, wordmark badge, active nav)
     uses these so the Studio reads unmistakably as OUR internal tool — distinct from
     the crimson-led brand we ship to clients. Content keeps the Sacred crimson. */
  --internal: #ff2d46;
  --internal-2: #ff5c6e;
  --internal-ink: #ffffff;
  --internal-glow: rgba(255, 45, 70, 0.36);
  --internal-wash: rgba(255, 45, 70, 0.12);
  --grad-internal: linear-gradient(180deg, var(--internal), var(--internal-2));

  /* ---- Signature gradient: Crimson ---- */
  --grad-sacred: linear-gradient(135deg, #d81b3a 0%, #c41230 55%, #8e0c22 110%);
  --grad-soft: linear-gradient(135deg, rgba(196,18,48,0.16), rgba(200,161,88,0.10));

  /* ---- Priority colors (P0 hottest) ---- */
  --p0: #ff2d46;
  --p1: #e8843c;
  --p2: #c8a158;
  --p3: #8b94a8;

  /* ---- Status ---- */
  --status-todo: #8b94a8;
  --status-active: #c41230;
  --status-review: #c8a158;
  --status-done: #4ade80;
  --status-blocked: #ff2d46;

  /* ---- Layout ---- */
  --sidebar-w: 250px;
  --topbar-h: 58px;
  --drawer-w: 440px;
  --maxw: 1180px;

  /* ---- Effects ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 36px var(--accent-glow);

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 13px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ambient brand glow behind everything */
body {
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(196, 18, 48, 0.13), transparent 60%),
    radial-gradient(1000px 760px at 6% 4%, rgba(255, 45, 70, 0.10), transparent 58%),
    var(--bg-0);
  min-height: 100%;
}

::selection { background: var(--accent-glow); color: var(--text-0); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-3); background-clip: content-box; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

.brand-gradient-text {
  background: var(--grad-sacred);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}