/*
 * @reddy/elements — design tokens
 * The reddy.world gold-on-dark system as portable custom properties.
 * Import wherever a project should speak the house language:
 *   <link rel="stylesheet" href="https://lab.reddy.world/lib/tokens.css">
 * Elements in this library read the --reddy-* names with fallbacks,
 * so the tokens are an upgrade, never a requirement.
 *
 * Every app of Ryan's links this one file, so the names are a contract:
 * add new ones freely, never rename or remove one. A change that has to
 * break names goes in tokens-v2.css, and apps move over one at a time.
 *
 * Light or dark follows the system. An app with its own switch sets
 * data-theme="light" or data-theme="dark" on <html> and that wins.
 * Every text colour here is at least 4.5:1 on --reddy-bg and
 * --reddy-surface in its own scheme (WCAG AA).
 */
:root {
  color-scheme: dark light;

  /* colour: dark is the default */
  --reddy-bg: #111111;
  --reddy-surface: #1a1917;
  --reddy-fg: #eae7e1;
  --reddy-fg-muted: rgba(234, 231, 225, 0.65);
  --reddy-accent: #c7a86d;       /* the gold */
  --reddy-accent-hover: #f0d98d;
  --reddy-line: rgba(234, 231, 225, 0.14);   /* borders, dividers */
  --reddy-focus: #f0d98d;                    /* keyboard focus ring */
  --reddy-ok: #7fd19b;
  --reddy-warn: #e8b64f;
  --reddy-danger: #f07b72;
  --reddy-info: #8fb8ff;

  /* type */
  --reddy-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --reddy-font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --reddy-font-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  --reddy-text-sm: 0.875rem;
  --reddy-text: 1rem;
  --reddy-text-lg: 1.25rem;
  --reddy-text-xl: 1.75rem;
  --reddy-leading: 1.5;

  /* space and shape: one scale, so gaps line up across apps */
  --reddy-space-1: 4px;
  --reddy-space-2: 8px;
  --reddy-space-3: 12px;
  --reddy-space-4: 16px;
  --reddy-space-5: 24px;
  --reddy-space-6: 32px;
  --reddy-radius: 6px;
  --reddy-radius-lg: 12px;
  --reddy-tap: 44px;             /* smallest thing a finger has to hit */
  --reddy-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --reddy-bg: #fdfcfb;
    --reddy-surface: #f0ede8;
    --reddy-fg: #1a1a1a;
    --reddy-fg-muted: rgba(26, 26, 26, 0.65);  /* 0.6 was 4.33:1 on the surface */
    /* Gold darkens in light mode: #c7a86d is ~1.9:1 on white. */
    --reddy-accent: #7a5f28;
    --reddy-accent-hover: #5d481e;
    --reddy-line: rgba(26, 26, 26, 0.14);
    --reddy-focus: #7a5f28;
    --reddy-ok: #1e6b3e;
    --reddy-warn: #855400;
    --reddy-danger: #b3261e;
    --reddy-info: #2456a8;
    --reddy-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

/* An app that chose a theme itself: pin the native controls and scrollbars
   to it too, not only the colours, or a forced light page on a dark system
   gets dark form fields. */
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* The same light set, for an app that chose it itself. */
:root[data-theme="light"] {
  color-scheme: light;
  --reddy-bg: #fdfcfb;
  --reddy-surface: #f0ede8;
  --reddy-fg: #1a1a1a;
  --reddy-fg-muted: rgba(26, 26, 26, 0.65);  /* 0.6 was 4.33:1 on the surface */
  --reddy-accent: #7a5f28;
  --reddy-accent-hover: #5d481e;
  --reddy-line: rgba(26, 26, 26, 0.14);
  --reddy-focus: #7a5f28;
  --reddy-ok: #1e6b3e;
  --reddy-warn: #855400;
  --reddy-danger: #b3261e;
  --reddy-info: #2456a8;
  --reddy-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}