/* iOS-style color tokens for light/dark modes.
   Keep names generic so all pages can reuse. */

/* Base tokens (fallbacks) */
:root {
  --accent: #FF9F0A; /* iOS Orange (dark appearance) */
  --link: var(--accent);   /* Use accent for all links */

  --label: #11181C;
  --label-muted: #6C6C70;

  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-grouped: #F2F2F7;

  --card: #ffffff;
  --card-tint: #F7F7FA;
  --border: rgba(60,60,67,0.29);
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: light) {
  :root {
    --accent: #FF9500; /* iOS Orange (light) */
    --link: var(--accent);

    --label: #11181C;
    --label-muted: #6C6C70;

    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-grouped: #F2F2F7;

    --card: #ffffff;
    --card-tint: #F7F7FA;
    --border: rgba(60,60,67,0.29);
    --shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #FF9F0A; /* iOS Orange (dark) */
    --link: var(--accent);

    --label: #E6E7EA;
    --label-muted: #A6A9AF;

    --bg: #0B0C10;
    --bg-elevated: #0F1116;
    --bg-grouped: #1C1C1E;

    --card: #0F1116;
    --card-tint: #141720;
    --border: rgba(84,84,88,0.65);
    --shadow: 0 12px 32px rgba(0,0,0,0.65);
  }
}

/* Helpful defaults */
html { background: var(--bg); }
body { color: var(--label); background: var(--bg); }
a { color: var(--link); }