/* =============================================================================
   theme.css — the single source of truth for every style value in the app.
   Spec: docs/feature-spec.md section 7a.

   Nothing outside this file hardcodes a color, font, size, radius, spacing
   step or shadow. To rebrand the app for a partner platform, change the
   values here and nowhere else.

   Direction (7c): Alpha+, the partner's platform. Like Alpha+, the app has
   two palettes and follows the visitor's system setting:
     - :root holds the LIGHT palette (the default) and every shared token —
       fonts, sizes, radii, spacing, shadows, layout.
     - The @media (prefers-color-scheme: dark) block at the end overrides
       COLOURS ONLY. Anything not colour belongs in :root, never there.
   Values come from Alpha+'s own tokens, extracted from myalphaplus.com (see
   docs/reference/). Where an Alpha+ value fails WCAG contrast, the comment
   gives the original and the reason for the change.
   The previous Jobber-style theme is in git history (commit 0767977).
   ============================================================================= */

:root {
  /* Not a token: native controls (radios, select arrows, date pickers,
     scrollbars) follow the page. Each palette sets its own. */
  color-scheme: light;

  /* =====================================================================
     LIGHT PALETTE (default)
     ===================================================================== */

  /* COLOR — accent. The single brand color: primary buttons, active states,
     links, checks. */
  --color-accent: #c9000c;              /* Alpha+ --primary */
  --color-accent-hover: #ce1924;        /* Alpha+ hover: primary at 90% over the light page */
  --color-accent-subtle: #fbebec;       /* primary at 8% over white */
  --color-accent-text: #c9000c;         /* red as text passes here: 6.02:1 on white, 5.22:1 at worst (on accent-subtle) */

  /* COLOR — surfaces */
  --color-page: #fdfbfb;                /* Alpha+ --background */
  --color-surface: #ffffff;             /* Alpha+ --card */
  --color-surface-subtle: #f7f4f4;      /* Alpha+ --sidebar */
  --color-surface-muted: #f5f0f0;       /* Alpha+ --muted / --secondary */

  /* COLOR — borders */
  --color-border: #e1dddc;              /* Alpha+ --border (decorative dividers, card edges) */
  --color-border-input: #8f8686;        /* Alpha+ uses #e1dddc, 1.35:1; form controls need 3:1 — this is 3.07:1 at worst */
  --color-border-invalid: var(--color-error-text); /* a flagged field must stand out more than a normal one: 7.5:1 */
  --color-border-strong: #6e6565;

  /* COLOR — text */
  --color-text: #0f0c0c;                /* Alpha+ --foreground */
  --color-text-strong: #0a0707;
  --color-text-secondary: #5b5353;      /* Alpha+ --muted-foreground (7.48:1 on white) */
  --color-text-muted: #6e6565;          /* 4.90:1 at worst */
  --color-text-inverse: #fffafc;        /* Alpha+ --primary-foreground; text on the red accent */
  --color-text-disabled: #a8a0a0;

  /* COLOR — semantic (used only where the meaning is real). Alpha+ shows
     none of these on its public pages. */
  --color-success-text: #10603f;
  --color-success-bg: #dcf1e7;

  --color-warning-text: #7a4b12;
  --color-warning-strong: #8a3d13;
  --color-warning-bg: #fdf5e9;
  --color-warning-border: #f0d5a8;
  --color-warning-border-hover: #dfa653;

  --color-error-text: #a32020;
  --color-error-strong: #7f1d1d;
  --color-error-bg: #fdeaea;
  --color-error-border: #f2b5b5;

  --color-info-text: #1c4e8a;
  --color-info-bg: #eaf2fb;
  --color-info-border: #bcd6f0;

  /* COLOR — component-specific */
  --color-button-primary-bg-disabled: #cfc8c8;
  --color-device-frame: #d5d0d0;
  --color-marker: #0f0c0c;
  --color-overlay: rgba(16, 12, 12, 0.55);
  /* Charts (Results preview): one hue, the best day in full accent. Checked
     with the dataviz palette validator against #ffffff — all checks pass;
     the tint is under 3:1, so every chart also has labels + a table view. */
  --color-chart-bar: #e08a8f;
  --color-chart-bar-best: #c9000c;

  /* =====================================================================
     SHARED — the same in both palettes
     ===================================================================== */

  /* Derived colours: these follow whichever palette is active. */
  --color-border-active: var(--color-accent);
  --color-tag-bg: var(--color-accent-subtle);
  --color-tag-text: var(--color-accent-text);
  --color-tag-neutral-bg: var(--color-surface-muted);
  --color-tag-neutral-text: var(--color-text-secondary);
  --color-button-primary-bg: var(--color-accent);
  --color-button-primary-bg-hover: var(--color-accent-hover);
  --color-button-primary-text: var(--color-text-inverse);
  --color-track: var(--color-surface-muted);
  /* The social icons are single-colour glyphs, drawn as masks in this colour. */
  --color-social-icon: var(--color-text-secondary);
  /* Uploaded logos are made for the newsletter's white header; they preview
     on the same white in both palettes, so a dark logo never vanishes. */
  --color-logo-backdrop: #ffffff;
  --color-chart-grid: var(--color-border);
  --color-chart-axis: var(--color-border-input);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     Hanken Grotesk for text, Bebas Neue (all caps by design, one weight)
     for page and dialog titles. Loaded in index.html and the guide page.
     --------------------------------------------------------------------- */
  --font-family-base: "Hanken Grotesk", "Calibre", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-display: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;

  --font-size-micro: 10px;
  --font-size-tiny: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-body: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  /* Bebas is condensed, so display titles run larger than text headings. */
  --font-size-display: 36px;
  --font-size-display-sm: 26px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-display: 400;           /* Bebas Neue's only weight — no faux bold */

  --line-height-display: 1.05;
  --line-height-tight: 1.3;
  --line-height-snug: 1.4;
  --line-height-base: 1.5;

  --letter-spacing-caps: 0.18em;        /* Alpha+ labels: 10–12px uppercase at 2–2.4px */
  --letter-spacing-display: 0.025em;

  /* ---------------------------------------------------------------------
     SPACING — 2px base scale
     --------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 64px;
  --space-14: 96px;

  /* ---------------------------------------------------------------------
     RADII — Alpha+'s app surfaces: 8px controls, 14px cards
     --------------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 14px;
  --radius-pill: 999px;
  --radius-device: 30px;
  --radius-device-screen: 22px;

  /* ---------------------------------------------------------------------
     BORDERS
     --------------------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 3px;
  --border-default: var(--border-width) solid var(--color-border);
  --border-input: var(--border-width) solid var(--color-border-input);
  --border-dashed: var(--border-width) dashed var(--color-border-input);

  /* ---------------------------------------------------------------------
     SHADOWS — Alpha+ uses one faint shadow; on near-black, borders do the
     separating. The focus ring is wider than Alpha+'s 1px so it stays
     visible.
     --------------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(201, 0, 12, 0.35);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --transition-fast: 120ms ease;

  /* ---------------------------------------------------------------------
     LAYOUT — structural dimensions kept here so no raw px escapes into
     styles.css. These are sizes, not brand values; most rebrands leave them.

     Breakpoints (media queries can't read custom properties, so styles.css
     repeats them): 900px — side-by-side panels stack; 640px — phone layout.
     --------------------------------------------------------------------- */
  --layout-max-width: 780px;
  --layout-max-width-wide: 1180px;
  --layout-page-padding-y: var(--space-11);
  --layout-page-padding-x: var(--space-10);
  --layout-page-padding-bottom: var(--space-14);

  --size-input-min-height: 72px;
  --size-textarea-sm: 70px;
  --size-textarea-md: 80px;
  --size-textarea-lg: 200px;
  --size-color-swatch-width: 48px;
  --size-color-swatch-height: 40px;
  --size-social-icon: 24px;
  --size-check-indicator: 16px;
  --size-tag-remove: 18px;
  --size-menu-width: 264px;

  --layer-menu: 10;
  --layer-modal: 100;

  --size-modal-width: 1040px;
  --size-modal-max-height: 88vh;
  --size-card-preview: 420px;
  --size-post-textarea: 320px;
  --size-logo-preview-height: 48px;
  --size-logo-preview-max-width: 160px;
  --size-photo-thumb-height: 180px;
  --size-photo-column-min: 280px;
  --size-row-label-min-width: 80px;
  --size-step-marker: 28px;

  /* Charts (Results preview). The chart reads these at runtime to lay out its
     SVG, so the geometry is themeable like everything else. */
  --size-chart-height: 220px;
  --size-chart-bar-max: 24px;          /* never fill the slot */
  --size-chart-bar-gap: 2px;           /* surface gap between adjacent bars */
  --size-chart-bar-radius: 4px;        /* rounded data-end, square at the baseline */
  --size-sparkline-width: 132px;
  --size-sparkline-height: 32px;
  --size-sparkline-bar-gap: 1px;
  --size-sr-only: 1px;

  --size-preview-width: 375px;
  --size-preview-screen-height: 640px;
  --size-preview-source-width: 600px;
  /* Fallback until the Review screen measures the real screen width. */
  --preview-scale: 0.585;

  --size-meter-height: 8px;
  --size-meter-marker-width: 3px;
  --size-meter-marker-height: 14px;
  --size-meter-marker-offset: -3px;

  --opacity-muted: 0.55;
}

/* =============================================================================
   DARK PALETTE — Alpha+ .dark, applied when the system asks for dark.
   Colours only; everything else is shared from :root above.
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* COLOR — accent */
    --color-accent: #c9000c;            /* Alpha+ --primary */
    --color-accent-hover: #b6010c;      /* Alpha+ hover: primary at 90% over the dark page */
    --color-accent-subtle: #300e0f;     /* primary at 15% over the card */
    --color-accent-text: #ff6467;       /* Alpha+ uses #c9000c, 3.13:1 on the card; this is 6.53:1 */

    /* COLOR — surfaces */
    --color-page: #090707;              /* Alpha+ .dark --background */
    --color-surface: #151010;           /* Alpha+ .dark --card */
    --color-surface-subtle: #1a1414;
    --color-surface-muted: #1f1919;     /* Alpha+ .dark --muted */

    /* COLOR — borders */
    --color-border: #2e2727;            /* Alpha+ .dark --border */
    --color-border-input: #6b6161;      /* Alpha+ uses #2e2727, 1.29:1; form controls need 3:1 — this is 3.15:1 */
    --color-border-strong: #807575;

    /* COLOR — text */
    --color-text: #fbf7f8;              /* Alpha+ .dark --foreground */
    --color-text-strong: #fffafc;
    --color-text-secondary: #a59c9c;    /* Alpha+ .dark --muted-foreground */
    --color-text-muted: #8f8686;
    --color-text-inverse: #fffafc;
    --color-text-disabled: #7d7474;

    /* COLOR — semantic, dark-surface versions */
    --color-success-text: #4ade80;
    --color-success-bg: #0f2a1f;

    --color-warning-text: #fbbf24;
    --color-warning-strong: #fcd34d;
    --color-warning-bg: #2a1f0a;
    --color-warning-border: #5c4513;
    --color-warning-border-hover: #8a6a1f;

    --color-error-text: #ff8a8c;
    --color-error-strong: #ffb3b4;
    --color-error-bg: #2a0e10;
    --color-error-border: #5c1a1e;

    --color-info-text: #7cc4fa;
    --color-info-bg: #0e1c2a;
    --color-info-border: #1d3a57;

    /* COLOR — component-specific */
    --color-button-primary-bg-disabled: #3a3232;
    --color-device-frame: #2e2727;
    --color-marker: #fbf7f8;
    --color-overlay: rgba(0, 0, 0, 0.72);
    /* Charts: validated against #151010 — all checks pass. */
    --color-chart-bar: #9c4046;
    --color-chart-bar-best: #f24a52;
  }
}