/* =========================================================================
   Cinegy Design System — Colors & Type
   "Software Defined Television" — broadcast-grade, monochrome, technical
   ========================================================================= */

/* ---------- Fonts -------------------------------------------------------- */
@font-face {
  font-family: "Bahnschrift";
  src: url("fonts/bahnschrift.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bahnschrift";
  src: url("fonts/bahnschrift-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* condensed bold has its own face — pulled in via .display class */
  font-family: "Bahnschrift Condensed";
  src: url("fonts/bahnschrift-bold-condensed.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* ---- Color: monochrome scale (the entire palette runs on this) ------- */
  --c-black:        #000000;   /* pure black — the brand box, headlines on white */
  --c-ink:          #0a0a0a;   /* near-black for body text on light bg */
  --c-graphite:     #1a1a1a;   /* deep panel surface */
  --c-charcoal:     #2a2a2a;   /* card/raised surface on dark */
  --c-iron:         #3d3d3d;   /* divider on dark, subtle borders */
  --c-steel:        #585858;   /* muted body text on dark */
  --c-silver:       #8a8a8a;   /* secondary text, captions, axis labels */
  --c-mist:         #b8b8b8;   /* tertiary text, disabled glyphs */
  --c-fog:          #d6d6d6;   /* hairline rule on white */
  --c-bone:         #ececec;   /* zebra rows, hover wash on light */
  --c-paper:        #f4f4f4;   /* app surface alt on light */
  --c-snow:         #fafafa;   /* page background on light */
  --c-white:        #ffffff;

  /* ---- Color: signal accents (used sparingly — broadcast indicators) -- */
  --c-on-air:       #d11414;   /* RECORD / ON-AIR / error */
  --c-live:         #d11414;
  --c-cue:          #c8a200;   /* warn / preview / cued */
  --c-good:         #2a8c4a;   /* green tally / OK */
  --c-link:         #2b6ad1;   /* hyperlink — used very rarely */

  /* ---- Semantic: surfaces (light theme defaults) --------------------- */
  --bg:             var(--c-white);
  --bg-1:           var(--c-snow);
  --bg-2:           var(--c-paper);
  --bg-3:           var(--c-bone);
  --surface:        var(--c-white);
  --surface-raised: var(--c-white);
  --surface-sunken: var(--c-paper);
  --overlay:        rgba(0, 0, 0, 0.55);

  /* ---- Semantic: foregrounds ----------------------------------------- */
  --fg:             var(--c-black);
  --fg-1:           var(--c-ink);     /* body */
  --fg-2:           var(--c-steel);   /* secondary */
  --fg-3:           var(--c-silver);  /* tertiary, captions */
  --fg-disabled:    var(--c-mist);
  --fg-on-dark:     var(--c-white);
  --fg-on-accent:   var(--c-white);

  /* ---- Borders ------------------------------------------------------- */
  --border:         var(--c-fog);     /* hairline 1px */
  --border-strong:  var(--c-iron);    /* darker rule */
  --border-focus:   var(--c-black);   /* focus rings — black, no blue */

  /* ---- Type families ------------------------------------------------- */
  --font-sans:      "Bahnschrift", "DIN Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display:   "Bahnschrift Condensed", "Bahnschrift", "DIN Condensed", "Oswald", "Impact", sans-serif;
  --font-mono:      ui-monospace, "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (industrial, slightly tight) ----------------------- */
  --fs-xs:          11px;
  --fs-sm:          12px;
  --fs-md:          14px;   /* body default */
  --fs-base:        14px;
  --fs-lg:          16px;
  --fs-xl:          18px;
  --fs-h6:          14px;
  --fs-h5:          16px;
  --fs-h4:          20px;
  --fs-h3:          26px;
  --fs-h2:          36px;
  --fs-h1:          54px;
  --fs-display:     88px;

  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-base:        1.45;
  --lh-loose:       1.6;

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;   /* labels, eyebrows, signal badges */

  /* ---- Spacing (4px base) ------------------------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;

  /* ---- Radii — nearly square; broadcast hardware aesthetic ----------- */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   3px;     /* default control radius */
  --r-3:   6px;     /* cards */
  --r-pill: 999px;

  /* ---- Shadows — sober, not floaty ---------------------------------- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-3: 0 6px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.25);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:      120ms;
  --t-base:      200ms;
  --t-slow:      320ms;

  /* ---- Layout -------------------------------------------------------- */
  --container:    1280px;
  --gutter:       24px;
  --rail:         48px;       /* dense toolbar height */
  --header:       56px;
}

/* ---------- Dark theme (the OS where Cinegy apps actually live) -------- */
[data-theme="dark"], .theme-dark {
  --bg:             #0d0d0d;
  --bg-1:           #121212;
  --bg-2:           #181818;
  --bg-3:           #1f1f1f;
  --surface:        #161616;
  --surface-raised: #1d1d1d;
  --surface-sunken: #0a0a0a;

  --fg:             #ffffff;
  --fg-1:           #ececec;
  --fg-2:           #b8b8b8;
  --fg-3:           #8a8a8a;
  --fg-disabled:    #585858;

  --border:         #2a2a2a;
  --border-strong:  #3d3d3d;
  --border-focus:   #ffffff;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.6);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
}

/* ---------- Base ------------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type roles ------------------------------------------------- */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg);
}

h1, .t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-5);
}
h2, .t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}
h3, .t-h3 {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}
h4, .t-h4 {
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
  margin: 0 0 var(--sp-2);
}
h5, .t-h5 {
  font-weight: 700;
  font-size: var(--fs-h5);
  margin: 0 0 var(--sp-2);
}
h6, .t-h6 {
  font-weight: 700;
  font-size: var(--fs-h6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
  margin: 0 0 var(--sp-2);
}

p, .t-body {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
.t-lead   { font-size: var(--fs-xl); line-height: var(--lh-base); color: var(--fg-1); }
.t-small  { font-size: var(--fs-sm); color: var(--fg-2); }
.t-caption{ font-size: var(--fs-xs); color: var(--fg-3); }
.t-eyebrow{
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
  font-weight: 700;
}
.t-label  {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 700;
  color: var(--fg-2);
}
code, .t-mono, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: var(--r-1);
}
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity var(--t-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

::selection {
  background: var(--c-black);
  color: var(--c-white);
}