/* =====================================================================
   GymMunshi Design Tokens · v1.0
   Every colour, font, size and effect in the UI comes from here.
   Light theme on :root; dark theme via [data-theme="dark"] or the OS
   setting (unless the page is pinned with data-theme="light").
   Never hard-code a colour in a component: use a --gm-* token.
   ===================================================================== */

:root {
  /* ---------- Brand (same in both themes) ---------- */
  --gm-ink: #0f172a;            /* our dark; use instead of black */
  --gm-rose: #e11d48;           /* brand red: primary actions, the M */
  --gm-rose-deep: #be123c;      /* hover / pressed */
  --gm-white: #ffffff;
  --gm-highlight: #facc15;      /* attention yellow: FREE / offer flags only, always with Ink text (11:1) */
  --gm-on-highlight: #0f172a;

  /* ---------- Surfaces (light) ---------- */
  --gm-bg: #f9fafb;             /* page */
  --gm-surface: #ffffff;        /* cards, inputs, menus */
  --gm-surface-2: #f8fafc;      /* subtle fills, table headers */
  --gm-surface-3: #f1f5f9;      /* hover fills, chips */
  --gm-overlay: rgba(15, 23, 42, 0.45);
  --gm-line: rgba(15, 23, 42, 0.08);
  --gm-line-strong: rgba(15, 23, 42, 0.16);

  /* ---------- Text (light) ---------- */
  --gm-text: #0f172a;           /* 17.8:1 on white */
  --gm-text-2: #475569;         /* 7.6:1 */
  --gm-muted: #64748b;          /* 4.8:1, minimum for small text */
  --gm-placeholder: #94a3b8;

  /* ---------- Accent (light) ---------- */
  --gm-accent: #e11d48;         /* fills: buttons, switches, focus */
  --gm-accent-hover: #be123c;
  --gm-accent-text: #be123c;    /* red text & links (6.3:1) */
  --gm-accent-soft: rgba(225, 29, 72, 0.08);
  --gm-accent-line: rgba(225, 29, 72, 0.32);
  --gm-on-accent: #ffffff;      /* 4.7:1 on --gm-accent */
  --gm-focus: rgba(225, 29, 72, 0.45);
  --gm-contrast: #0f172a;       /* inverse fill: dark buttons, current page */
  --gm-contrast-hover: #1e293b;
  --gm-on-contrast: #ffffff;
  --gm-elevated: #0f172a;       /* dark floating surfaces: toast, tooltip, code, banner */

  /* ---------- Status (light) ---------- */
  --gm-success: #047857;  --gm-success-soft: rgba(5, 150, 105, 0.10);  --gm-success-fill: #059669;
  --gm-warning: #b45309;  --gm-warning-soft: rgba(217, 119, 6, 0.12);  --gm-warning-fill: #d97706;
  --gm-danger:  #b91c1c;  --gm-danger-soft:  rgba(220, 38, 38, 0.09);  --gm-danger-fill:  #dc2626;
  --gm-info:    #1d4ed8;  --gm-info-soft:    rgba(37, 99, 235, 0.09);  --gm-info-fill:    #2563eb;

  /* ---------- Appearance previews (fixed per style, used by .gm-style-preview) ---------- */
  --gm-style-light-bg: #f9fafb;
  --gm-style-ink-bg: #0f172a;
  --gm-style-onyx-bg: #0c0a0a;
  --gm-style-amoled-bg: #000000;
  --gm-style-graphite-bg: #1f2023;

  /* ---------- Membership states (map to status) ---------- */
  --gm-state-active: var(--gm-success-fill);
  --gm-state-expiring: var(--gm-warning-fill);
  --gm-state-expired: var(--gm-danger-fill);
  --gm-state-frozen: var(--gm-info-fill);

  /* ---------- Effects (light) ---------- */
  --gm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --gm-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --gm-shadow-lg: 0 24px 60px -16px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
  --gm-grid: rgba(15, 23, 42, 0.035);

  /* ---------- Typography ---------- */
  --gm-font-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --gm-font-body: "Geist", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gm-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --gm-text-xs: 12px;  --gm-text-sm: 13px;  --gm-text-md: 14px;  --gm-text-base: 15px;
  --gm-text-lg: 17px;  --gm-text-xl: 20px;  --gm-text-2xl: 24px; --gm-text-3xl: 30px;
  --gm-text-4xl: 38px; --gm-text-5xl: 48px; --gm-text-6xl: 64px;
  --gm-leading: 1.55;  --gm-leading-tight: 1.1;
  --gm-weight-regular: 400; --gm-weight-medium: 500; --gm-weight-semibold: 600;
  --gm-weight-display: 800; --gm-weight-hero: 850;

  /* ---------- Space (4 px grid) ---------- */
  --gm-space-1: 4px;  --gm-space-2: 8px;  --gm-space-3: 12px; --gm-space-4: 16px;
  --gm-space-5: 20px; --gm-space-6: 24px; --gm-space-8: 32px; --gm-space-10: 40px;
  --gm-space-12: 48px; --gm-space-16: 64px; --gm-space-20: 80px;

  /* ---------- Shape ---------- */
  --gm-radius-sm: 6px; --gm-radius-md: 10px; --gm-radius-lg: 14px; --gm-radius-xl: 22px; --gm-radius-full: 999px;
  --gm-control-h: 40px; --gm-control-h-sm: 32px; --gm-control-h-lg: 48px;

  /* ---------- Layout ---------- */
  --gm-container: 1200px;
  --gm-gutter: clamp(16px, 4vw, 32px);
  --gm-sidebar-w: 248px;
  --gm-topbar-h: 60px;

  /* ---------- Motion ---------- */
  --gm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gm-fast: 120ms; --gm-base: 200ms; --gm-slow: 320ms;

  /* ---------- Layers ---------- */
  --gm-z-sticky: 20; --gm-z-dropdown: 40; --gm-z-overlay: 60; --gm-z-toast: 80;

  color-scheme: light;
}

/* Touch screens: bigger tap targets (44 px minimum for primary controls) */
@media (pointer: coarse) {
  :root { --gm-control-h: 44px; --gm-control-h-sm: 36px; --gm-control-h-lg: 52px; }
}

/* ---------- Dark theme: Onyx (default dark style) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --gm-bg: #0c0a0a;
    --gm-surface: #151212;
    --gm-surface-2: #1c1818;
    --gm-surface-3: #2a2323;
    --gm-overlay: rgba(0, 0, 0, 0.70);
    --gm-line: rgba(255, 240, 238, 0.08);
    --gm-line-strong: rgba(255, 240, 238, 0.15);
    --gm-text: #fafaf9;
    --gm-text-2: #d6d3d1;
    --gm-muted: #a8a29e;
    --gm-placeholder: #78716c;    --gm-accent: #e11d48;
    --gm-accent-hover: #f43f5e;
    --gm-accent-text: #fb7185;
    --gm-accent-soft: rgba(244, 63, 94, 0.16);
    --gm-accent-line: rgba(251, 113, 133, 0.40);
    --gm-focus: rgba(251, 113, 133, 0.55);
    --gm-contrast: #fafaf9; --gm-contrast-hover: #ffffff; --gm-on-contrast: #0c0a0a; --gm-elevated: #2a2323;
    --gm-success: #34d399;  --gm-success-soft: rgba(52, 211, 153, 0.14);  --gm-success-fill: #10b981;
    --gm-warning: #fbbf24;  --gm-warning-soft: rgba(251, 191, 36, 0.14);  --gm-warning-fill: #f59e0b;
    --gm-danger:  #f87171;  --gm-danger-soft:  rgba(248, 113, 113, 0.14); --gm-danger-fill:  #ef4444;
    --gm-info:    #60a5fa;  --gm-info-soft:    rgba(96, 165, 250, 0.14);  --gm-info-fill:    #3b82f6;
    --gm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --gm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 240, 238, 0.05);
    --gm-shadow-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 240, 238, 0.06);
    --gm-grid: rgba(255, 240, 238, 0.035);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --gm-bg: #0c0a0a;
  --gm-surface: #151212;
  --gm-surface-2: #1c1818;
  --gm-surface-3: #2a2323;
  --gm-overlay: rgba(0, 0, 0, 0.70);
  --gm-line: rgba(255, 240, 238, 0.08);
  --gm-line-strong: rgba(255, 240, 238, 0.15);
  --gm-text: #fafaf9;
  --gm-text-2: #d6d3d1;
  --gm-muted: #a8a29e;
  --gm-placeholder: #78716c;  --gm-accent: #e11d48;
  --gm-accent-hover: #f43f5e;
  --gm-accent-text: #fb7185;
  --gm-accent-soft: rgba(244, 63, 94, 0.16);
  --gm-accent-line: rgba(251, 113, 133, 0.40);
  --gm-focus: rgba(251, 113, 133, 0.55);
  --gm-contrast: #fafaf9; --gm-contrast-hover: #ffffff; --gm-on-contrast: #0c0a0a; --gm-elevated: #2a2323;
  --gm-success: #34d399;  --gm-success-soft: rgba(52, 211, 153, 0.14);  --gm-success-fill: #10b981;
  --gm-warning: #fbbf24;  --gm-warning-soft: rgba(251, 191, 36, 0.14);  --gm-warning-fill: #f59e0b;
  --gm-danger:  #f87171;  --gm-danger-soft:  rgba(248, 113, 113, 0.14); --gm-danger-fill:  #ef4444;
  --gm-info:    #60a5fa;  --gm-info-soft:    rgba(96, 165, 250, 0.14);  --gm-info-fill:    #3b82f6;
  --gm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --gm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 240, 238, 0.05);
  --gm-shadow-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 240, 238, 0.06);
  --gm-grid: rgba(255, 240, 238, 0.035);
}

/* =====================================================================
   DARK STYLES — the user picks one in Settings → Appearance.
   Onyx (the dark theme above) is the default. Others apply on top of it:
   <html data-theme="dark" data-dark="ink|amoled|graphite">
   To add a style: copy a block, change the values, add it to tokens.json,
   the UI kit Appearance demo and CLAUDE.md.
   ===================================================================== */

/* Graphite: dim neutral grey, softer contrast for long sessions (like "dimmed" modes) */
:root[data-theme="dark"][data-dark="graphite"] {
  --gm-bg: #1f2023;
  --gm-surface: #26272b;
  --gm-surface-2: #2c2d31;
  --gm-surface-3: #3a3b40;
  --gm-overlay: rgba(10, 10, 12, 0.60);
  --gm-line: rgba(255, 255, 255, 0.09);
  --gm-line-strong: rgba(255, 255, 255, 0.16);
  --gm-text: #ececed;
  --gm-text-2: #c7c8cc;
  --gm-muted: #9a9ba1;
  --gm-placeholder: #6e6f76;
  --gm-contrast: #ececed; --gm-contrast-hover: #ffffff; --gm-on-contrast: #1f2023; --gm-elevated: #3a3b40;
  --gm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --gm-shadow-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --gm-grid: rgba(255, 255, 255, 0.03);
}
/* Ink: deep navy (the brand's dark colour) */
:root[data-theme="dark"][data-dark="ink"] {
  --gm-bg: #0f172a;
  --gm-surface: #16213a;
  --gm-surface-2: #1b2742;
  --gm-surface-3: #23304d;
  --gm-overlay: rgba(2, 6, 23, 0.65);
  --gm-line: rgba(255, 255, 255, 0.08);
  --gm-line-strong: rgba(255, 255, 255, 0.16);
  --gm-text: #f1f5f9;
  --gm-text-2: #cbd5e1;
  --gm-muted: #94a3b8;
  --gm-placeholder: #64748b;
  --gm-contrast: #f1f5f9; --gm-contrast-hover: #ffffff; --gm-on-contrast: #0f172a; --gm-elevated: #2a3854;
  --gm-accent-soft: rgba(244, 63, 94, 0.14);
  --gm-shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --gm-shadow-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --gm-grid: rgba(255, 255, 255, 0.035);
}
/* AMOLED: true black page, near-black cards (pixels off on OLED phones) */
:root[data-theme="dark"][data-dark="amoled"] {
  --gm-bg: #000000;
  --gm-surface: #0b0b0c;
  --gm-surface-2: #121213;
  --gm-surface-3: #1e1e20;
  --gm-overlay: rgba(0, 0, 0, 0.78);
  --gm-line: rgba(255, 255, 255, 0.09);
  --gm-line-strong: rgba(255, 255, 255, 0.16);
  --gm-text: #ffffff;
  --gm-text-2: #d4d4d4;
  --gm-muted: #a3a3a3;
  --gm-placeholder: #737373;
  --gm-contrast: #ffffff; --gm-contrast-hover: #f5f5f5; --gm-on-contrast: #000000; --gm-elevated: #1e1e20;
  --gm-shadow-sm: none;
  --gm-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.07);
  --gm-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 80px -20px rgba(0, 0, 0, 1);
  --gm-grid: rgba(255, 255, 255, 0.04);
}