/* =====================================================================
   EmPT DESIGN TOKENS — "warm apothecary journal on parchment"
   ---------------------------------------------------------------------
   Every colour, font, size, spacing and shape value the app uses is
   defined here. Change a value here and it changes everywhere.

   Two layers:
     1. PALETTE  – the named raw colours (Parchment, Ink, Terracotta…).
     2. ROLES    – what each colour is used for (--color-bg, --color-text…).
   styles.css only ever uses the ROLE tokens, so to recolour something,
   point its role at a different palette colour.

   - Rules for using these: DESIGN.md
   - Live preview: styleguide.html
   - Fonts are loaded from Google Fonts in index.html and styleguide.html.
   ===================================================================== */

:root {
  /* ===== 1. PALETTE ==================================================== */
  --color-terracotta-seal: #b05a36;  /* The ONE accent. Fills, borders, active states */
  --color-terracotta-text: #a4522f;  /* Same rust, a touch deeper so small text passes contrast on Aged Paper */
  --gradient-terracotta-seal: linear-gradient(116deg, rgb(176 90 54), rgb(212 166 142)); /* Decorative only: logo, seals */
  --color-parchment: #fef9ef;        /* Page canvas. Never use pure white */
  --color-aged-paper: #f5eee1;       /* Cards and panels: one step deeper than the canvas */
  --color-warm-taupe: #d1c9bf;       /* Hairlines, dividers, outlines */
  --color-ink: #2a2b2f;              /* Primary text and headings */
  --color-charcoal: #333333;         /* Body copy for longer passages */
  --color-graphite: #515151;         /* Captions, dates, helper text, placeholders */
  --color-ash: #808988;              /* Input borders only (the one cool neutral) */
  --color-brick: #8a2c1c;            /* Destructive actions and errors ONLY */
  --color-camel: #dcc0a3;            /* Warm brown: sessions with the trainer ONLY */

  /* ===== 2. ROLES ====================================================== */
  --color-bg: var(--color-parchment);              /* Page background */
  --color-surface: var(--color-parchment);         /* Header, sidebar, dialogs, inputs, chat window */
  --color-surface-raised: var(--color-aged-paper); /* Cards, goals box, exercise rows, hover wash */
  --color-text: var(--color-ink);
  --color-text-body: var(--color-charcoal);        /* Workout notes and exercise details */
  --color-text-muted: var(--color-graphite);
  --color-border: var(--color-warm-taupe);
  --color-input-border: var(--color-ash);

  --color-accent: var(--color-terracotta-seal);    /* Primary buttons, active tab, unread dot */
  --color-accent-text: var(--color-terracotta-text); /* Eyebrow labels, outlined buttons, exercise numbers */
  --color-on-accent: var(--color-parchment);       /* Text on a terracotta fill */
  --color-focus-ring: rgb(176 90 54 / 0.2);        /* Soft glow around focused inputs */
  --color-focus: var(--color-terracotta-seal);     /* Keyboard focus outline on buttons */

  --color-danger: var(--color-brick);
  --color-on-danger: var(--color-parchment);
  --color-notify: var(--color-terracotta-seal);    /* "New message" dot */

  --color-chat-mine-bg: var(--color-ink);          /* Your own chat bubbles */
  --color-chat-mine-text: var(--color-parchment);
  --color-chat-theirs-bg: var(--color-aged-paper); /* The other person's bubbles */
  --color-chat-theirs-text: var(--color-ink);
  --color-toast-bg: var(--color-ink);
  --color-toast-text: var(--color-parchment);
  --color-backdrop: rgb(42 43 47 / 0.45);          /* Ink-tinted dim behind dialogs */
  --color-session-bg: var(--color-camel);          /* Sessions with the trainer stand out: a warm brown card… */
  --color-session-text: var(--color-ink);          /* …with Ink writing (8 : 1) */

  /* Plate calculator drawing: the standard gym plate colours, so clients
     recognise them. The ONLY place these colours may be used (see
     DESIGN.md, Colour rule 3). Tuned slightly warm to sit on parchment. */
  --plate-25: #b3362b;    /* Red */
  --plate-20: #2a5a9c;    /* Blue */
  --plate-15: #e9b62b;    /* Yellow */
  --plate-10: #2f7449;    /* Green */
  --plate-5: var(--color-parchment);  /* White */
  --plate-2-5: #b3362b;   /* Red (small) */
  --plate-1-25: #c4c6c8;  /* Silver */
  --plate-outline: var(--color-charcoal);
  --plate-label-on-dark: var(--color-parchment);  /* On red, blue, green (5.4 : 1 or more) */
  --plate-label-on-light: var(--color-ink);       /* On yellow, white, silver (7.5 : 1 or more) */
  --bar-steel: var(--color-graphite);
  --bar-sleeve: var(--color-ash);

  /* ===== TYPOGRAPHY ==================================================== */
  /* Serif: editorial headlines only (stands in for Financier Display). */
  --font-display: "Newsreader", "Tiempos Headline", Georgia, "Times New Roman", serif;
  /* Sans: all body and interface text (stands in for Ftbase). */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Mono: tiny all-caps markers like "DONE" badges. Use sparingly. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --weight-light: 300;     /* Serif italic accent words; large descriptive sans text */
  --weight-regular: 400;   /* Body; serif roman headlines */
  --weight-semibold: 600;  /* Buttons, labels, eyebrows */
  --weight-bold: 700;      /* Rare emphasis */

  --tracking-body: -0.023em; /* Applies to ALL sans text. Never to the serif */

  /* Sans scale */
  --text-mono: 11px;       /* Mono badges */
  --text-eyebrow: 12px;    /* All-caps pre-titles */
  --text-body-sm: 14px;    /* Helper text, dates, small buttons */
  --text-body: 16px;       /* Body and every input (never smaller) */
  --text-body-lg: 18px;    /* Intro paragraphs */
  --text-subheading: 20px;
  /* Serif scale */
  --text-title: 26px;      /* App addition: card and dialog titles (roman only) */
  --text-heading: 34px;    /* Page headings. Smallest size allowed to use italic */
  --text-heading-lg: 45px; /* Sign-in headline */

  --leading-tight: 1;       /* Wordmark and mono badges */
  --leading-eyebrow: 1.4;
  --leading-body: 1.5;
  --leading-body-lg: 1.4;
  --leading-subheading: 1.3;
  --leading-title: 1.15;
  --leading-heading: 1.15;
  --leading-heading-lg: 1.1;

  /* ===== SPACING (8px base; 4/12/20 for fine component tuning) ======== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ===== SHAPE ========================================================= */
  --radius-chart: 2px;     /* Bars in any future charts: deliberately square */
  --radius-nav: 12px;      /* Navigation items such as the client list */
  --radius-cards: 24px;    /* Cards, dialogs, chat window, textareas */
  --radius-buttons: 40px;  /* Every button */
  --radius-pills: 9999px;  /* Inputs, tags, badges, dots, toasts */
  --border-width: 1px;
  --border-width-strong: 1.5px; /* Outlined buttons */
  --focus-ring-width: 3px;
  --tab-indicator-width: 2px;
  --seal-tilt: -8deg;      /* Streak seals sit slightly askew, like a hand-pressed stamp */

  /* ===== ELEVATION: only these two shadows exist ======================= */
  --shadow-lg: 0 0 20px 0 rgb(0 0 0 / 0.15);          /* Subtle glow: active search/input */
  --shadow-xl: 12px 32px 80px 0 rgb(42 43 47 / 0.1);  /* Floating: dialogs, toasts */

  /* ===== SIZES AND LAYOUT ============================================= */
  --control-height: 48px;     /* Buttons and inputs (12px + 24px line + 12px) */
  --control-height-sm: 40px;  /* Small buttons and icon buttons */
  --topbar-height: 64px;
  --gutter: 24px;             /* Outer page padding (16px on small phones) */
  --page-max-width: 1280px;
  --sidebar-width: 320px;
  --content-max-width: 880px; /* Trainer's client panel */
  --reading-max-width: 720px; /* Client's page */
  --dialog-width: 480px;
  --dialog-width-wide: 720px; /* Workout editor */
  --chat-max-height: 560px;
  /* Phone/desktop switch-over is 760px, written directly in styles.css
     (CSS can't use a variable in a media query). */

  /* ===== MOTION ======================================================== */
  --motion-fast: 150ms ease-out;
  --motion-stamp: 600ms cubic-bezier(0.3, 1.4, 0.5, 1); /* The week-sealed stamp: lands with a small bounce */

  color-scheme: light; /* Light theme only, by design (see DESIGN.md) */
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-stamp: 0ms; }
}