/*
 * Golden Trade Challenge — Design Tokens
 * Single source of truth for all colour and typography variables.
 * Included by every template via <link rel="stylesheet" href="/assets/css/theme.css?v=4">
 *
 * Dark mode = default. Light mode via prefers-color-scheme.
 */

:root {
  /* ── Golds ─────────────────────────────── */
  --gold:        #C9A84C;
  --gold-light:  #E8CC7A;
  --gold-dim:    #8B6914;

  /* ── Surfaces ──────────────────────────── */
  --black:       #0A0A08;
  --black-rgb:   10,10,8;
  --surface:     #111110;
  --surface-2:   #1A1A18;
  --surface-3:   #242420;

  /* ── Borders ───────────────────────────── */
  --border:      rgba(201,168,76,0.18);
  --border-hi:   rgba(201,168,76,0.40);

  /* ── Text ──────────────────────────────── */
  --white:       #FAFAF7;
  --text:        #E8E4DC;
  --text-muted:  #9B958A;
  --text-dim:    #959089;

  /* ── Semantic ──────────────────────────── */
  --error:       #E05050;
  --success:     #4CAF74;
  --buy:         #4CAF74;
  --sell:        #E05050;
  --positive:    #4CAF74;
  --negative:    #E05050;
  --green:       #4CAF74;
  --red:         #E05050;
  --info:        #6495ED;
  --silver:      #A8A8A8;
  --bronze:      #CD7F32;

  /* ── Dark-pinned — for elements on dark backgrounds in any mode ── */
  --dark-bg:         #0A0A08;
  --dark-bg-rgb:     10,10,8;
  --dark-surface:    #111110;
  --dark-surface-2:  #1A1A18;
  --dark-gold:       #C9A84C;
  --dark-gold-light: #E8CC7A;
  --dark-white:      #FAFAF7;
  --dark-text:       #E8E4DC;
  --dark-text-muted: #9B958A;
  --dark-text-dim:   #959089;
  --dark-border:     rgba(201,168,76,0.18);

  /* ── Typography ────────────────────────── */
  --font-display:  Georgia, serif;
  --font-body:    system-ui, sans-serif;
  --font-base:    17px;

  /* ── Layout (default, pages can override) ─ */
  --max-w:  1280px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
}

/* ── Light Mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    /* ── Golds — rich & warm on light backgrounds ── */
    --gold:        #8A6D1B;
    --gold-light:  #A8882A;
    --gold-dim:    #5C4512;

    /* ── Surfaces — warm white ── */
    --black:       #FAF8F4;
    --black-rgb:   250,248,244;
    --surface:     #F0EDE5;
    --surface-2:   #E4E0D6;
    --surface-3:   #D6D1C5;

    /* ── Borders — stronger on light ── */
    --border:      rgba(100,80,30,0.22);
    --border-hi:   rgba(100,80,30,0.50);

    /* ── Text — high contrast ── */
    --white:       #141310;
    --text:        #1C1B18;
    --text-muted:  #504A40;
    --text-dim:    #6E675C;

    /* ── Semantic — deeper for WCAG AA on light ── */
    --error:       #C03030;
    --success:     #2D7A4A;
    --buy:         #2D7A4A;
    --sell:        #C03030;
    --positive:    #2D7A4A;
    --negative:    #C03030;
    --green:       #2D7A4A;
    --red:         #C03030;
    --info:        #3560B5;

    /* ── Slightly larger base for readability on light ── */
    --font-base:   18px;
  }
}