/* ============================================================
   VEDA — Colors & Type
   The single source of truth. Import this in every artifact.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Raleway:wght@300;400;500;600;700&display=swap');

/* Brand sans — Roboto (variable, wdth + wght axes), uploaded by Veda. */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     BRAND PALETTE — taken from ColorTheme.jpeg
     Used as VIVID ACCENTS on a neutral canvas.
     ---------------------------------------------------------- */
  --plum:        #3F194D;   /* deep purple — brand primary, ink-on-light */
  --violet:      #68097E;   /* royal purple — primary CTA, headlines */
  --magenta:     #C91C7A;   /* hot accent — links, highlights, "now playing" */
  --coral:       #E9675C;   /* warm accent — secondary CTA, badges */
  --sun:         #FFCA06;   /* yellow — status, marquee, "live" */

  /* Tints + shades for surfaces. Hand-tuned in oklch for harmony. */
  --plum-90:     oklch(22% 0.07 320);    /* near-black plum, body text on light */
  --plum-70:     oklch(35% 0.12 320);    /* hover/active for plum */
  --plum-30:     oklch(78% 0.06 320);    /* divider on plum bg */
  --plum-10:     oklch(94% 0.025 320);   /* faint plum wash */

  --violet-50:   oklch(58% 0.20 312);    /* hover/active for violet CTA */
  --magenta-50:  oklch(58% 0.22 350);    /* hover for magenta */
  --coral-90:    oklch(94% 0.04 30);     /* warm soft tint */
  --sun-90:      oklch(96% 0.06 90);     /* yellow soft tint */

  /* ----------------------------------------------------------
     NEUTRALS — warm-toned (paper, not bluish) to pair with the
     warm accents (coral / yellow) and feel "human".
     ---------------------------------------------------------- */
  --ink:         #15101A;   /* primary text on light, dark bg base */
  --graphite:    #2B2330;   /* secondary text on light, raised dark bg */
  --slate:       #5C5462;   /* muted body, captions */
  --pewter:      #8C8590;   /* placeholder, disabled, meta */
  --mist:        #C9C3CC;   /* hairline borders, dividers */
  --fog:         #E8E4EA;   /* subtle separators, inactive chips */
  --cream:       #F5F1ED;   /* warm off-white surface */
  --paper:       #FBF9F7;   /* page background */
  --white:       #FFFFFF;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS — what UI code actually consumes.
     ---------------------------------------------------------- */
  /* Foregrounds */
  --fg-1:        var(--ink);          /* headlines, primary text */
  --fg-2:        var(--graphite);     /* body */
  --fg-3:        var(--slate);        /* secondary text */
  --fg-4:        var(--pewter);       /* meta, captions, placeholders */
  --fg-on-dark:  var(--cream);        /* text on dark/plum surfaces */
  --fg-on-accent: var(--white);       /* text on violet/magenta */

  /* Backgrounds */
  --bg-page:     var(--paper);        /* default page */
  --bg-surface:  var(--white);        /* cards, panels */
  --bg-sunken:   var(--cream);        /* inset, code blocks */
  --bg-dark:     var(--ink);          /* dark mode / hero */
  --bg-brand:    var(--plum);         /* brand panel */

  /* Lines */
  --line-1:      var(--fog);          /* default border */
  --line-2:      var(--mist);         /* stronger border */
  --line-on-dark: rgba(245,241,237,0.12);

  /* Accents */
  --accent:      var(--violet);       /* primary action */
  --accent-hover: var(--violet-50);
  --accent-2:    var(--magenta);      /* link, "now playing" */
  --accent-warm: var(--coral);
  --accent-hot:  var(--sun);

  /* Status */
  --status-live:    var(--sun);
  --status-success: oklch(60% 0.14 150);
  --status-warning: var(--coral);
  --status-error:   var(--magenta);

  /* ----------------------------------------------------------
     RADII — generous on cards, tight on chips.
     ---------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;   /* cards */
  --r-xl:  28px;   /* hero cards, modals */
  --r-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — soft, low, warm. No harsh black.
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(21,16,26,0.04), 0 1px 1px rgba(21,16,26,0.03);
  --shadow-2: 0 4px 12px rgba(21,16,26,0.06), 0 1px 2px rgba(21,16,26,0.04);
  --shadow-3: 0 12px 32px rgba(21,16,26,0.10), 0 2px 6px rgba(21,16,26,0.05);
  --shadow-glow-violet: 0 8px 28px rgba(104,9,126,0.22);
  --shadow-glow-magenta: 0 8px 28px rgba(201,28,122,0.22);
  --inner-line: inset 0 0 0 1px var(--line-1);

  /* ----------------------------------------------------------
     SPACING SCALE — 4px base.
     ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* main UI ease */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ----------------------------------------------------------
     TYPE — Instrument Serif (display, italic-forward) +
            Geist (sans, body & UI) + Geist Mono (timestamps)
     ---------------------------------------------------------- */
  --font-display: 'Raleway', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-sans:    'Raleway', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale — generous display, restrained UI.
     Display uses Instrument Serif, often italic, big, with tight tracking. */
  --t-display-xl: 96px;
  --t-display-l:  72px;
  --t-display-m:  56px;
  --t-display-s:  40px;

  --t-h1: 40px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 20px;
  --t-h5: 17px;

  --t-body-l: 18px;
  --t-body:   15px;
  --t-body-s: 14px;
  --t-caption: 12px;
  --t-label:  11px;   /* uppercase eyebrows */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-page);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "tnum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.display-xl, .display-l, .display-m, .display-s,
h1, h2, h3 {
  color: var(--fg-1);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display-xl { font: 300 var(--t-display-xl) / 0.95 var(--font-display); font-stretch: 85%; letter-spacing: -0.035em; }
.display-l  { font: 300 var(--t-display-l)  / 0.98 var(--font-display); font-stretch: 85%; letter-spacing: -0.032em; }
.display-m  { font: 300 var(--t-display-m)  / 1.02 var(--font-display); font-stretch: 90%; letter-spacing: -0.028em; }
.display-s  { font: 400 var(--t-display-s)  / 1.05 var(--font-display); letter-spacing: -0.022em; }

/* Accent phrase — light weight on accent color. No italic. */
.display-xl em, .display-l em, .display-m em, .display-s em,
.display-italic {
  font-style: normal;
  color: var(--accent-2);
  font-weight: 300;
}

h1 { font: 600 var(--t-h1) / 1.15 var(--font-sans); letter-spacing: -0.02em; }
h2 { font: 600 var(--t-h2) / 1.2  var(--font-sans); letter-spacing: -0.018em; }
h3 { font: 600 var(--t-h3) / 1.3  var(--font-sans); letter-spacing: -0.012em; }
h4 { font: 500 var(--t-h4) / 1.35 var(--font-sans); letter-spacing: -0.008em; color: var(--fg-1); }
h5 { font: 500 var(--t-h5) / 1.4  var(--font-sans); color: var(--fg-1); }

p, .body { font: 400 var(--t-body) / 1.55 var(--font-sans); color: var(--fg-2); }
.body-l  { font: 400 var(--t-body-l) / 1.55 var(--font-sans); color: var(--fg-2); }
.body-s  { font: 400 var(--t-body-s) / 1.5  var(--font-sans); color: var(--fg-3); }
.caption { font: 400 var(--t-caption) / 1.4  var(--font-sans); color: var(--fg-4); }

/* Eyebrow / overline — uppercase Geist Mono, used for section labels. */
.label, .eyebrow {
  font: 500 var(--t-label) / 1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

a {
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--violet); }

::selection { background: var(--sun); color: var(--ink); }