/* ============================================================
   VideoDB Design System — Colors & Typography
   Source: videodb.io, uploaded brand assets
   ============================================================ */

/* --- Google Fonts (substitutions noted where necessary) --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ============================================================
   BASE COLOR TOKENS
   ============================================================ */
:root {
  /* --- Background Scale --- */
  --color-bg-base:      #0D0D0D;   /* site/app canvas — near-black */
  --color-bg-1:         #111111;   /* cards, panels */
  --color-bg-2:         #1A1A1A;   /* elevated surfaces, modals */
  --color-bg-3:         #242424;   /* code blocks, input bg */
  --color-bg-4:         #2E2E2E;   /* hover on bg-3 */
  --color-border:       #333333;   /* subtle dividers */
  --color-border-strong:#4D4D4D;   /* active / focused border */

  /* --- Orange Brand (primary) --- */
  --color-orange-500:   #D4420A;   /* primary brand orange */
  --color-orange-600:   #B83808;   /* pressed / darker */
  --color-orange-400:   #E25A24;   /* hover / lighter */
  --color-orange-200:   #F0956A;   /* tinted / muted */
  --color-orange-100:   #FAD5C3;   /* very light tint (light-mode only) */

  /* --- Foreground / Text --- */
  --color-fg-1:         #FFFFFF;   /* primary text */
  --color-fg-2:         #C8C8C8;   /* secondary text */
  --color-fg-3:         #888888;   /* muted / placeholder */
  --color-fg-4:         #555555;   /* disabled */
  --color-fg-inverse:   #0D0D0D;   /* text on orange buttons */

  /* --- Utility / Semantic --- */
  --color-success:      #3EC97C;
  --color-warning:      #F5A623;
  --color-error:        #E8473A;
  --color-info:         #4A9EF5;

  /* --- Code syntax tones --- */
  --color-code-string:  #E87C4E;   /* warm orange-tan */
  --color-code-keyword: #C678DD;   /* violet */
  --color-code-comment: #5C6370;   /* gray */
  --color-code-number:  #98C379;   /* green */
}

/* ============================================================
   SEMANTIC COLOR TOKENS
   ============================================================ */
:root {
  --background:         var(--color-bg-base);
  --surface:            var(--color-bg-1);
  --surface-elevated:   var(--color-bg-2);
  --surface-code:       var(--color-bg-3);

  --text-primary:       var(--color-fg-1);
  --text-secondary:     var(--color-fg-2);
  --text-muted:         var(--color-fg-3);
  --text-disabled:      var(--color-fg-4);

  --accent:             var(--color-orange-500);
  --accent-hover:       var(--color-orange-400);
  --accent-press:       var(--color-orange-600);
  --accent-text:        var(--color-fg-1);       /* text ON accent bg */

  --border:             var(--color-border);
  --border-strong:      var(--color-border-strong);
}

/* ============================================================
   BASE TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* Font families */
  --font-display:  'Space Grotesk', 'DM Sans', sans-serif;   /* headings, hero */
  --font-body:     'DM Sans', 'Space Grotesk', sans-serif;   /* body copy */
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace; /* code, labels */

  /* Font weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Type scale (rem-based, root = 16px) */
  --text-xs:    0.6875rem;   /*  11px */
  --text-sm:    0.75rem;     /*  12px */
  --text-base:  0.875rem;    /*  14px */
  --text-md:    1rem;        /*  16px */
  --text-lg:    1.125rem;    /*  18px */
  --text-xl:    1.25rem;     /*  20px */
  --text-2xl:   1.5rem;      /*  24px */
  --text-3xl:   2rem;        /*  32px */
  --text-4xl:   2.5rem;      /*  40px */
  --text-5xl:   3.5rem;      /*  56px */
  --text-6xl:   5rem;        /*  80px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.15em;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY RULES
   ============================================================ */

/* Apply base defaults */
body {
  font-family:      var(--font-body);
  font-size:        var(--text-md);
  font-weight:      var(--fw-regular);
  line-height:      var(--lh-relaxed);
  color:            var(--text-primary);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
}

/* Hero / Display headline */
.display, h1 {
  font-family:    var(--font-display);
  font-size:      var(--text-5xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color:          var(--text-primary);
}

/* Section heading */
h2 {
  font-family:    var(--font-display);
  font-size:      var(--text-3xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color:          var(--text-primary);
}

h3 {
  font-family:    var(--font-display);
  font-size:      var(--text-2xl);
  font-weight:    var(--fw-semibold);
  line-height:    var(--lh-snug);
  color:          var(--text-primary);
}

h4 {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    var(--fw-semibold);
  line-height:    var(--lh-normal);
  color:          var(--text-primary);
}

/* Body paragraph */
p {
  font-family:  var(--font-body);
  font-size:    var(--text-md);
  font-weight:  var(--fw-regular);
  line-height:  var(--lh-relaxed);
  color:        var(--text-secondary);
}

/* Lead / subtitle paragraph */
.lead {
  font-family:  var(--font-body);
  font-size:    var(--text-lg);
  font-weight:  var(--fw-regular);
  line-height:  var(--lh-relaxed);
  color:        var(--text-secondary);
}

/* Small / caption */
small, .caption {
  font-family:  var(--font-body);
  font-size:    var(--text-sm);
  font-weight:  var(--fw-regular);
  color:        var(--text-muted);
}

/* Label (uppercase tracking) */
.label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* Inline code */
code {
  font-family:  var(--font-mono);
  font-size:    var(--text-base);
  font-weight:  var(--fw-regular);
  background:   var(--surface-code);
  padding:      0.1em 0.35em;
  border-radius: 3px;
  color:        var(--color-orange-200);
}

/* Code block */
pre {
  font-family:  var(--font-mono);
  font-size:    var(--text-base);
  font-weight:  var(--fw-regular);
  line-height:  var(--lh-relaxed);
  background:   var(--surface-code);
  padding:      1.25rem;
  border-radius: 6px;
  overflow-x:   auto;
  color:        var(--text-primary);
}

/* Accent / highlight text */
.accent-text {
  color: var(--accent);
}

/* ============================================================
   SPACING & LAYOUT TOKENS
   ============================================================ */
:root {
  --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-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px rgba(212,66,10,0.25); /* orange glow */
}