/* tokens.css — design tokens only. Same variable kinds as Hunar; the colours are this app's own.
   Gym = purple, Work = green, Life = blue. --top is the solid colour of the very top of the
   page; the Android status bar (theme-color) is set to exactly this, so there is no white bar. */
:root {
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Neutral base (cool, clean) */
  --color-bg:          #f6f7f9;
  --color-surface:     #ffffff;
  --color-surface-2:   #eceef2;
  --color-fg:          #0f1115;
  --color-fg-muted:    #5b616e;
  --color-fg-subtle:   #6b7280;   /* 4.5:1 on the page background */
  --color-hairline:    rgba(15, 17, 21, 0.08);
  --color-border:      rgba(15, 17, 21, 0.14);

  /* Glass */
  --glass-bg:          rgba(255, 255, 255, 0.72);
  --glass-bg-strong:   rgba(255, 255, 255, 0.88);
  --glass-border:      rgba(255, 255, 255, 0.7);
  --glass-shadow:      0 8px 32px rgba(15, 17, 21, 0.10);
  --glass-blur:        blur(20px) saturate(180%);

  /* States */
  --color-success:     #16a34a;
  --color-danger:      #e11d48;
  --color-water:       #0891b2;
  --color-water-2:     #22d3ee;

  /* Section colours: accent (fills/icons), strong (text-size + buttons), tint, on (text on accent) */
  --gym-accent:  #8b5cf6; --gym-strong:  #6d28d9; --gym-tint:  #f1edfe; --gym-on:  #ffffff; --gym-top:  #ebe8f9;
  --work-accent: #10b981; --work-strong: #047857; --work-tint: #e6f8f1; --work-on: #ffffff; --work-top: #dff1ed;
  --life-accent: #3b82f6; --life-strong: #1d4ed8; --life-tint: #eaf1fe; --life-on: #ffffff; --life-top: #e3ebf9;

  /* Glow strength of the section colour behind the page */
  --glow-1: 22%;
  --glow-2: 13%;

  /* Spacing / type / shape / motion */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --text-xs: 13px; --text-sm: 15px; --text-md: 17px; --text-lg: 19px; --text-xl: 22px; --text-2xl: 26px; --text-display: 34px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 22px; --radius-full: 999px;
  --shadow-glass: var(--glass-shadow);
  --transition-press: 150ms ease-out;
  --transition-screen: 260ms cubic-bezier(.2, .8, .2, 1);
  --transition-glow: 400ms ease;

  --topbar-h: 52px;
  --tabbar-h: 64px;
}

html[data-section="gym"]  { --accent: var(--gym-accent);  --accent-strong: var(--gym-strong);  --accent-tint: var(--gym-tint);  --on-accent: var(--gym-on);  --top: var(--gym-top); }
html[data-section="work"] { --accent: var(--work-accent); --accent-strong: var(--work-strong); --accent-tint: var(--work-tint); --on-accent: var(--work-on); --top: var(--work-top); }
html[data-section="life"] { --accent: var(--life-accent); --accent-strong: var(--life-strong); --accent-tint: var(--life-tint); --on-accent: var(--life-on); --top: var(--life-top); }
html { --accent: var(--gym-accent); --accent-strong: var(--gym-strong); --accent-tint: var(--gym-tint); --on-accent: var(--gym-on); --top: var(--gym-top); }

/* Dark theme: one shared block, applied by media query (system) and by data-theme (manual). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:         #0b0d12;
    --color-surface:    #151821;
    --color-surface-2:  #1d212c;
    --color-fg:         #eef0f4;
    --color-fg-muted:   #a2a8b4;
    --color-fg-subtle:  #868d9c;
    --color-hairline:   rgba(255, 255, 255, 0.07);
    --color-border:     rgba(255, 255, 255, 0.14);
    --glass-bg:         rgba(21, 24, 33, 0.66);
    --glass-bg-strong:  rgba(21, 24, 33, 0.86);
    --glass-border:     rgba(255, 255, 255, 0.09);
    --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.45);
    --color-success:    #34d399;
    --color-danger:     #fb7185;
    --color-water:      #22d3ee;
    --color-water-2:    #67e8f9;
    --glow-1: 26%;
    --glow-2: 16%;
    --gym-accent:  #a78bfa; --gym-strong:  #a78bfa; --gym-tint:  rgba(167, 139, 250, 0.16); --gym-on:  #16092e; --gym-top:  #1e1c2e;
    --work-accent: #34d399; --work-strong: #34d399; --work-tint: rgba(52, 211, 153, 0.16);  --work-on: #04140d; --work-top: #102522;
    --life-accent: #60a5fa; --life-strong: #60a5fa; --life-tint: rgba(96, 165, 250, 0.16);  --life-on: #06122a; --life-top: #151f2e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg:         #0b0d12;
  --color-surface:    #151821;
  --color-surface-2:  #1d212c;
  --color-fg:         #eef0f4;
  --color-fg-muted:   #a2a8b4;
  --color-fg-subtle:  #868d9c;
  --color-hairline:   rgba(255, 255, 255, 0.07);
  --color-border:     rgba(255, 255, 255, 0.14);
  --glass-bg:         rgba(21, 24, 33, 0.66);
  --glass-bg-strong:  rgba(21, 24, 33, 0.86);
  --glass-border:     rgba(255, 255, 255, 0.09);
  --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.45);
  --color-success:    #34d399;
  --color-danger:     #fb7185;
  --color-water:      #22d3ee;
  --color-water-2:    #67e8f9;
  --glow-1: 26%;
  --glow-2: 16%;
  --gym-accent:  #a78bfa; --gym-strong:  #a78bfa; --gym-tint:  rgba(167, 139, 250, 0.16); --gym-on:  #16092e; --gym-top:  #1e1c2e;
  --work-accent: #34d399; --work-strong: #34d399; --work-tint: rgba(52, 211, 153, 0.16);  --work-on: #04140d; --work-top: #102522;
  --life-accent: #60a5fa; --life-strong: #60a5fa; --life-tint: rgba(96, 165, 250, 0.16);  --life-on: #06122a; --life-top: #151f2e;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }