@import url('/css/fonts.css');

/* Thème Anneau : jetons de docs/design-anneau.md. data-theme est posé par js/theme-init.js. */
:root {
  color-scheme: light;
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --label: #000000;
  --label2: #8E8E93;
  --label3: #6C6C70;
  --sep: rgba(60, 60, 67, 0.14);
  --fill: rgba(118, 118, 128, 0.12);
  --seg-on: #FFFFFF;
  --chev: #C7C7CC;
  --tint: #FA114F;
  --tint-bg: rgba(250, 17, 79, 0.10);
  --tint-soft: rgba(250, 17, 79, 0.06);
  --green: #34C759;
  --red: #FF3B30;
  --blue: #007AFF;
  --orange: #FF9500;
  --indigo: #5856D6;
  --bar: rgba(242, 242, 247, 0.85);
  --veil: rgba(0, 0, 0, 0.28);
  --shadow-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --card: #1C1C1E;
  --label: #FFFFFF;
  --label2: #98989F;
  --label3: #AEAEB2;
  --sep: rgba(84, 84, 88, 0.55);
  --fill: rgba(118, 118, 128, 0.28);
  --seg-on: #636366;
  --chev: #48484A;
  --tint: #FF375F;
  --tint-bg: rgba(255, 55, 95, 0.16);
  --tint-soft: rgba(255, 55, 95, 0.09);
  --green: #30D158;
  --red: #FF453A;
  --blue: #0A84FF;
  --orange: #FF9F0A;
  --indigo: #7D7AFF;
  --bar: rgba(0, 0, 0, 0.72);
  --veil: rgba(0, 0, 0, 0.6);
  --shadow-color: rgba(0, 0, 0, 0.5);
}

:root {
  /* Noms historiques de l'interface, branchés sur les jetons */
  --bg-body: var(--bg);
  --bg-primary: var(--bg);
  --bg-secondary: var(--card);
  --bg-card: var(--card);
  --bg-card-solid: var(--card);
  --bg-elevated: var(--card);
  --bg-hover: var(--fill);
  --bg-active: var(--tint-soft);

  --glass-bg: var(--bar);
  --glass-border: var(--sep);
  --glass-border-hover: var(--chev);

  --text-primary: var(--label);
  --text-secondary: var(--label2);
  --text-muted: var(--label2);
  --text-bright: var(--label);

  --accent: var(--tint);
  --accent-bright: var(--tint);
  --accent-dim: var(--tint);
  --accent-hover: var(--tint);
  --accent-glow: color-mix(in srgb, var(--tint) 30%, transparent);
  --accent-bg: var(--tint-bg);
  --accent-gradient: linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 80%, #000));
  --accent-gradient-soft: linear-gradient(135deg, var(--tint-bg), var(--tint-soft));

  --protein-color: var(--blue);
  --protein-dim: var(--blue);
  --protein-glow: color-mix(in srgb, var(--blue) 25%, transparent);
  --weight-color: var(--indigo);
  --weight-glow: color-mix(in srgb, var(--indigo) 25%, transparent);
  --danger: var(--red);
  --danger-hover: var(--red);
  --danger-glow: color-mix(in srgb, var(--red) 25%, transparent);
  --success: var(--green);
  --warning: var(--orange);

  --border: var(--sep);
  --border-subtle: var(--sep);
  --border-accent: color-mix(in srgb, var(--tint) 30%, transparent);

  --shadow-sm: 0 2px 8px var(--shadow-color);
  --shadow-md: 0 4px 24px var(--shadow-color);
  --shadow-lg: 0 12px 48px var(--shadow-color);
  --shadow-glow: none;
  --shadow-card: none;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Typography */
  --font-sans: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

  /* Navbar */
  --navbar-height: 54px;

  /* Transitions */
  --transition-fast: 0.15s ease;

  /* Modal */
  --modal-max-width: 560px;
}