/* ============================================================
   homehogs — design tokens (single source of truth).
   CSS custom properties ONLY. Changing the brand = editing this file.
   Breakpoints (for reference in media queries — CSS vars can't be
   used there): mobile < 640px, tablet < 960px, desktop >= 960px.
   ============================================================ */

:root {
    /* ---------------------------------------------------------
       THE PALETTE — the five site colours. Change the brand here.
       1 sunshine  — warm yellow highlights & brand warmth
       2 blossom   — the logo pink, for actions, links and focus
       3 cloud     — soft off-white page background
       4 ink       — deep navy text & dark surfaces
       5 mist      — cool blue-grey borders & quiet surfaces
       --------------------------------------------------------- */
    --hc-sunshine: #f6b31b;
    --hc-blossom: #e75f87;
    --hc-cloud: #fafafa;
    --hc-ink: #16233a;
    --hc-mist: #dfe5f0;

    /* Derived semantic tokens — reference the palette, don't restate it. */
    --hc-bg: var(--hc-cloud);
    --hc-surface: #ffffff;
    --hc-surface-sunken: #f3f4f6;
    --hc-border: color-mix(in srgb, var(--hc-mist) 80%, var(--hc-ink));
    --hc-border-subtle: var(--hc-mist);
    --hc-text: var(--hc-ink);
    --hc-text-muted: color-mix(in srgb, var(--hc-ink) 60%, var(--hc-mist));
    --hc-text-inverse: #ffffff;

    /* Actions, links and the brand all share the blossom pink of the logo;
       sunshine is for highlights and warmth. */
    --hc-brand: var(--hc-blossom);
    --hc-accent: var(--hc-blossom);
    --hc-accent-hover: color-mix(in srgb, var(--hc-blossom) 85%, var(--hc-ink));
    --hc-accent-soft: color-mix(in srgb, var(--hc-blossom) 12%, #ffffff);
    --hc-on-accent: #ffffff;
    --hc-highlight: var(--hc-sunshine);
    --hc-highlight-soft: color-mix(in srgb, var(--hc-sunshine) 18%, #ffffff);
    --hc-on-highlight: color-mix(in srgb, var(--hc-sunshine) 25%, var(--hc-ink));

    /* Status colours (reserved for state, never decoration). */
    --hc-danger: #cf3a30;
    --hc-danger-soft: #fbe7e5;
    --hc-success: #1a8a52;
    --hc-success-soft: #e2f5ea;
    --hc-warning: #8a6116;
    --hc-warning-soft: var(--hc-highlight-soft);

    /* Chrome */
    --hc-topbar-bg: rgba(255, 255, 255, 0.82);
    --hc-tabbar-bg: rgba(255, 255, 255, 0.94);

    /* Spacing scale */
    --hc-space-1: 0.25rem;
    --hc-space-2: 0.5rem;
    --hc-space-3: 0.75rem;
    --hc-space-4: 1rem;
    --hc-space-5: 1.5rem;
    --hc-space-6: 2rem;
    --hc-space-7: 3rem;
    --hc-space-8: 4rem;

    /* Radii — generous, Apple-ish */
    --hc-radius-sm: 10px;
    --hc-radius: 14px;
    --hc-radius-lg: 20px;
    --hc-radius-full: 999px;

    /* Type scale */
    --hc-font-family: "DejaVu Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hc-font-size-xs: 0.75rem;
    --hc-font-size-sm: 0.875rem;
    --hc-font-size-base: 1rem;
    --hc-font-size-lg: 1.125rem;
    --hc-font-size-xl: 1.375rem;
    --hc-font-size-2xl: 1.75rem;
    --hc-font-size-3xl: 2.25rem;
    --hc-line-height: 1.5;

    /* Shadows — soft and diffuse */
    --hc-shadow-sm: 0 1px 2px rgba(22, 35, 58, 0.05);
    --hc-shadow: 0 2px 6px rgba(22, 35, 58, 0.06), 0 12px 32px rgba(22, 35, 58, 0.07);
    --hc-shadow-pop: 0 4px 12px rgba(22, 35, 58, 0.10), 0 20px 48px rgba(22, 35, 58, 0.16);
}

/* Dark mode: redefine tokens only — never per-component overrides. */
@media (prefers-color-scheme: dark) {
    :root {
        --hc-bg: #0f1828;
        --hc-surface: #1a2539;
        --hc-surface-sunken: #141e30;
        --hc-border: #3a4a68;
        --hc-border-subtle: #2a3750;
        --hc-text: #f2f5fa;
        --hc-text-muted: #9aa8c0;
        --hc-text-inverse: #16233a;

        --hc-brand: #f48bab;
        --hc-accent: #f48bab;
        --hc-accent-hover: #f7abc2;
        --hc-accent-soft: #3c2230;
        --hc-on-accent: #0f1828;
        --hc-highlight: #ffc94a;
        --hc-highlight-soft: #3a3014;
        --hc-on-highlight: #ffd97a;

        --hc-danger: #ff7d73;
        --hc-danger-soft: #43201d;
        --hc-success: #55d491;
        --hc-success-soft: #10371f;
        --hc-warning: #ffd97a;
        --hc-warning-soft: #3a3014;

        --hc-topbar-bg: rgba(15, 24, 40, 0.82);
        --hc-tabbar-bg: rgba(15, 24, 40, 0.94);

        --hc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --hc-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.35);
        --hc-shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.45);
    }
}