/* SROTop100 theme: Gold on charcoal. Confirmed 2026-09-30.
   Spec: features/18-ui-ux-responsive.md §18.7. Design: design/README.md. */

:root {
  /* Ground and surfaces */
  --bg: #161616;
  --bg-sunken: #121212;        /* inputs, date chips, banner placeholders */
  --surface: #1c1c1c;          /* panels and cards */
  --surface-hover: #232323;
  --header-bg: rgba(18, 18, 18, 0.82);
  --glass: color-mix(in srgb, var(--surface) 70%, transparent);
  --glass-strong: color-mix(in srgb, #141414 88%, transparent);
  --glass-line: rgb(255 255 255 / 10%);

  /* Lines */
  --border: #2b2b2b;
  --border-row: #262626;       /* between table rows */
  --border-strong: #3a3a3a;    /* outlined buttons */
  --border-gold: #6b5410;      /* Elite cards, top-three cards */

  /* Text */
  --text: #ededed;
  --text-soft: #c9c9c9;        /* secondary text, inactive nav */
  --text-muted: #8c8c8c;       /* labels, captions. Lowest text colour allowed on --bg */
  --text-on-gold: #161616;

  /* Gold */
  --gold-1: #b88909;
  --gold: #d4b83a;
  --gold-2: #edde5d;
  --gold-text: #e8d251;        /* gold used as text on dark */
  --gold-number: #c9a227;      /* large figures */
  --gold-gradient: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  --gold-band: linear-gradient(90deg, rgba(184, 137, 9, 0.34), rgba(184, 137, 9, 0.06)); /* panel headers */
  --gold-tint: rgba(184, 137, 9, 0.13);   /* date-group rows */
  --gold-glow: 0 18px 40px -28px var(--gold-2);
  --gold-edge: inset 0 2px 0 -1px var(--gold);  /* gold top edge on outlined buttons and cards */
  --page-glow: radial-gradient(900px 340px at 18% 0%, rgba(184, 137, 9, 0.2), rgba(184, 137, 9, 0) 70%);

  /* Status. Never the only signal: always paired with an icon or words */
  --ok: #5fd39a;               /* verified, beta is live, moved up */
  --live: #ff5a5f;             /* live stream dot */

  /* Type */
  --font-sans: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Amiri", Georgia, serif;   /* italic, section headings only */
  --text-xs: 12px;             /* capital labels, letter-spacing 0.18em */
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;             /* hero paragraph */
  --text-xl: 24px;             /* card titles */
  --text-2xl: 34px;            /* serif section headings in panels */
  --text-3xl: 44px;            /* serif section headings, big figures */
  --text-hero: 62px;           /* page headline, weight 700, letter-spacing -0.035em */
  --label-tracking: 0.18em;

  /* Shape */
  --radius-chip: 8px;          /* date chips */
  --radius-panel: 16px;        /* panels and cards */
  --radius-pill: 9999px;       /* buttons, badges, header, tab bar */

  /* Space */
  --page-x: 56px;              /* 16px on phones */
  --gap-section: 56px;
  --gap-panel: 24px;
  --row-h: 64px;               /* table rows; 88px on phones */
  --tap: 44px;                 /* smallest height of anything clickable */
}

/* Arabic: no letter-spacing on labels, no italic on headings */
:root:lang(ar) {
  --label-tracking: 0;
}