/* powerlift.ing — design tokens (powerlifting / gym floor) */
/* Fonts: load fonts.css (or Google <link>) in HTML before this file. */

:root {
  /* Brand */
  --pl-plate: #ff5c00;
  --pl-plate-dim: #e04e00;
  --pl-chalk: #f5f3ef;
  --pl-iron: #0d0d0f;
  --pl-steel: #16161a;
  --pl-rack: #1e1e24;
  --pl-rack-up: #282830;

  /* Semantic */
  --bg: var(--pl-chalk);
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel2: #eeede8;
  --text: #121214;
  --text-strong: #0d0d0f;
  --muted: #5c5c66;
  --border: #d8d6d0;
  --border2: #c4c2bc;
  --accent: var(--pl-plate);
  --accent-muted: color-mix(in srgb, var(--pl-plate) 14%, transparent);
  --danger: #dc2626;
  --success: #16a34a;
  --focus-ring: color-mix(in srgb, var(--pl-plate) 40%, transparent);

  --shadow: 0 4px 24px rgba(13, 13, 15, 0.08);
  --shadow-lg: 0 12px 40px rgba(13, 13, 15, 0.12);
  --ghost-border: var(--border2);

  --sb-track: var(--pl-chalk);
  --sb-thumb: #b8b6b0;
  --sb-thumb-hover: #9a9892;

  --radius: 12px;
  --radius2: 8px;
  --radius-pill: 999px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 36px;

  /* Type scale (UI copy) */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --leading-tight: 1.35;
  --leading-body: 1.65;
  --leading-relaxed: 1.75;
  --prose-gap: var(--space-4);
  --prose-gap-lg: var(--space-5);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --font-display: "Bebas Neue", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --topbar-h: 52px;
  --weekbar-h: auto;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--pl-iron);
    --bg-elevated: var(--pl-steel);
    --panel: var(--pl-steel);
    --panel2: var(--pl-rack);
    --text: #f4f4f5;
    --text-strong: #ffffff;
    --muted: #9ca3af;
    --border: #2e2e36;
    --border2: #3a3a44;
    --accent-muted: color-mix(in srgb, var(--pl-plate) 18%, transparent);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    --ghost-border: var(--border2);
    --sb-track: var(--pl-iron);
    --sb-thumb: #3a3a44;
    --sb-thumb-hover: #4a4a56;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--pl-chalk);
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel2: #eeede8;
  --text: #121214;
  --text-strong: #0d0d0f;
  --muted: #5c5c66;
  --border: #d8d6d0;
  --border2: #c4c2bc;
  --accent-muted: color-mix(in srgb, var(--pl-plate) 14%, transparent);
  --shadow: 0 4px 24px rgba(13, 13, 15, 0.08);
  --shadow-lg: 0 12px 40px rgba(13, 13, 15, 0.12);
  --sb-track: var(--pl-chalk);
  --sb-thumb: #b8b6b0;
  --sb-thumb-hover: #9a9892;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--pl-iron);
  --bg-elevated: var(--pl-steel);
  --panel: var(--pl-steel);
  --panel2: var(--pl-rack);
  --text: #f4f4f5;
  --text-strong: #ffffff;
  --muted: #9ca3af;
  --border: #2e2e36;
  --border2: #3a3a44;
  --accent-muted: color-mix(in srgb, var(--pl-plate) 18%, transparent);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --sb-track: var(--pl-iron);
  --sb-thumb: #3a3a44;
  --sb-thumb-hover: #4a4a56;
}

html[data-theme="light"],
html[data-theme="dark"] {
  /* manual theme wins over prefers-color-scheme */
}

html {
  scrollbar-gutter: stable;
}