/* ==========================================================================
   RA Tracker — Design tokens
   Every color and font used in the site lives here. Change a value once and
   it updates everywhere. Light theme is the default; dark theme overrides the
   same names below.
   ========================================================================== */

:root {
  /* ---- Fonts ---------------------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-figures: var(--font-sans); /* big stat numbers (tabular) */

  /* ---- Logo (header mark; favicons are linked in each page's <head>) ---- */
  --logo: url("/images/logo-light.jpg");

  /* ---- Brand (Upwork green) ------------------------------------------- */
  --brand: #14a800;
  --brand-strong: #108a00;
  --brand-soft: #e6f4df;
  --brand-softer: #f1f9ec;
  --on-brand: #ffffff;

  /* ---- Surfaces (white cream) ----------------------------------------- */
  --bg: #faf7f0;
  --bg-elevated: #fffdf8;
  --surface: #ffffff;
  --surface-2: #f5f1e7;
  --surface-3: #ede7d9;
  --border: #e7e0d0;
  --border-strong: #d6cdb8;
  --overlay: rgba(28, 33, 26, 0.38);

  /* ---- Font colors ---------------------------------------------------- */
  --text: #17201a;          /* headings, primary text */
  --text-2: #4a564d;        /* body, secondary text */
  --text-3: #868f87;        /* captions, placeholders */
  --text-invert: #fbf8f1;   /* text on dark chips */
  --text-link: var(--brand-strong);

  /* ---- Data / status colors ------------------------------------------- */
  --c-photo: #14a800;
  --c-illustration: #c08a00;
  --c-vector: #2f7fd1;
  --c-video: #c2410c;
  --c-other: #8b8f86;
  --c-ai: #7c5cc4;
  --c-ai-soft: #efeafb;
  --c-warn: #b45309;
  --c-warn-soft: #fdf2e2;
  --c-danger: #c0362c;
  --c-danger-soft: #fbe9e7;

  /* ---- Shape & depth -------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 26, 0.05);
  --shadow: 0 1px 2px rgba(23, 32, 26, 0.04), 0 8px 24px -12px rgba(23, 32, 26, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(23, 32, 26, 0.28);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);

  color-scheme: light;
}

/* ---- Dark theme values (shared by both selectors below) ---------------- */
:root[data-theme="dark"] {
  --logo: url("/images/logo-dark.jpg");
  --brand: #3cc21f;
  --brand-strong: #14a800;
  --brand-soft: rgba(60, 194, 31, 0.14);
  --brand-softer: rgba(60, 194, 31, 0.07);
  --on-brand: #0b1209;

  --bg: #0e120f;
  --bg-elevated: #131814;
  --surface: #161c17;
  --surface-2: #1c231d;
  --surface-3: #252e26;
  --border: #252d26;
  --border-strong: #354036;
  --overlay: rgba(0, 0, 0, 0.6);

  --text: #f1eee4;
  --text-2: #b3bbb0;
  --text-3: #7a857b;
  --text-invert: #0e120f;
  --text-link: var(--brand);

  --c-photo: #3cc21f;
  --c-illustration: #e0b02c;
  --c-vector: #5aa2ee;
  --c-video: #f0773c;
  --c-other: #8d968c;
  --c-ai: #a78bfa;
  --c-ai-soft: rgba(167, 139, 250, 0.14);
  --c-warn: #f0a63c;
  --c-warn-soft: rgba(240, 166, 60, 0.12);
  --c-danger: #f06d62;
  --c-danger-soft: rgba(240, 109, 98, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

/* Follow the OS when the user picked "System" (no data-theme attribute). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo: url("/images/logo-dark.jpg");
    --brand: #3cc21f;
    --brand-strong: #14a800;
    --brand-soft: rgba(60, 194, 31, 0.14);
    --brand-softer: rgba(60, 194, 31, 0.07);
    --on-brand: #0b1209;

    --bg: #0e120f;
    --bg-elevated: #131814;
    --surface: #161c17;
    --surface-2: #1c231d;
    --surface-3: #252e26;
    --border: #252d26;
    --border-strong: #354036;
    --overlay: rgba(0, 0, 0, 0.6);

    --text: #f1eee4;
    --text-2: #b3bbb0;
    --text-3: #7a857b;
    --text-invert: #0e120f;
    --text-link: var(--brand);

    --c-photo: #3cc21f;
    --c-illustration: #e0b02c;
    --c-vector: #5aa2ee;
    --c-video: #f0773c;
    --c-other: #8d968c;
    --c-ai: #a78bfa;
    --c-ai-soft: rgba(167, 139, 250, 0.14);
    --c-warn: #f0a63c;
    --c-warn-soft: rgba(240, 166, 60, 0.12);
    --c-danger: #f06d62;
    --c-danger-soft: rgba(240, 109, 98, 0.12);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.8);

    color-scheme: dark;
  }
}