/* ==========================================================================
   PhoneGrade site - design tokens
   Palette taken from the shipped app so the site and the product are one thing.
   Light values come from the phone test suite stylesheet, dark accent from the
   desktop shell.
   ========================================================================== */

:root {
    /* brand */
    --pg-blue-600: #2563eb;
    --pg-blue-700: #1d4ed8;
    --pg-blue-500: #3b82f6;
    --pg-blue-400: #60a5fa;
    --pg-blue-100: #dbeafe;
    --pg-blue-50: #eff6ff;

    /* neutrals (slate) */
    --pg-slate-50: #f8fafc;
    --pg-slate-100: #f1f5f9;
    --pg-slate-200: #e2e8f0;
    --pg-slate-300: #cbd5e1;
    --pg-slate-400: #94a3b8;
    --pg-slate-500: #64748b;
    --pg-slate-600: #475569;
    --pg-slate-700: #334155;
    --pg-slate-800: #1e293b;
    --pg-slate-900: #0f172a;
    --pg-slate-950: #020617;

    /* status */
    --pg-green-600: #16a34a;
    --pg-green-500: #22c55e;
    --pg-green-100: #dcfce7;
    --pg-green-800: #166534;
    --pg-amber-600: #d97706;
    --pg-amber-500: #f59e0b;
    --pg-amber-100: #fef3c7;
    --pg-amber-800: #92400e;
    --pg-red-600: #dc2626;
    --pg-red-100: #fee2e2;
    --pg-red-800: #991b1b;

    /* Card borders are hairlines and stay low contrast on purpose: they separate
     * a card from the page rather than conveying meaning, which is the case
     * WCAG 1.4.11 exempts. Controls a reader has to find carry a visible label
     * and a focus ring instead. */

    /* semantic surfaces */
    --pg-bg: var(--pg-slate-50);
    --pg-surface: #ffffff;
    --pg-surface-2: var(--pg-slate-100);
    --pg-border: var(--pg-slate-200);
    --pg-border-strong: var(--pg-slate-300);
    --pg-text: var(--pg-slate-900);
    /* One step darker than slate-500. Secondary text carries whole sentences,
     * and slate-500 on the slate-100 band a subtle section uses measures 4.3 to
     * 1, which is just under the 4.5 that needs. */
    --pg-text-2: #475569;
    /* The muted step is still readable. slate-400 measures about 2.6 to 1 on
     * white, which is fine for a hairline and not for the captions and small
     * print that use this, so the muted step is slate-500 at about 4.8. The
     * separation from --pg-text-2 survives because that is slate-600. */
    --pg-text-3: var(--pg-slate-500);
    --pg-accent: var(--pg-blue-600);
    --pg-accent-hover: var(--pg-blue-700);
    --pg-accent-contrast: #ffffff;

    /* inverted band, used for the hero and the closing call to action */
    --pg-inv-bg: var(--pg-slate-900);
    --pg-inv-surface: #16213c;
    --pg-inv-border: #27334f;
    --pg-inv-text: #f8fafc;
    --pg-inv-text-2: #a8b6cf;
    --pg-inv-accent: var(--pg-blue-400);

    /* spacing, 4pt grid lifted from the app */
    --pg-1: 0.25rem;
    --pg-2: 0.5rem;
    --pg-3: 0.75rem;
    --pg-4: 1rem;
    --pg-5: 1.25rem;
    --pg-6: 1.5rem;
    --pg-8: 2rem;
    --pg-10: 2.5rem;
    --pg-12: 3rem;
    --pg-16: 4rem;
    --pg-20: 5rem;
    --pg-24: 6rem;

    /* radii */
    --pg-r-sm: 6px;
    --pg-r-md: 8px;
    --pg-r-lg: 12px;
    --pg-r-xl: 16px;
    --pg-r-2xl: 22px;
    --pg-r-full: 999px;

    /* elevation */
    --pg-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --pg-sh-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --pg-sh-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --pg-sh-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.22);
    --pg-glow: 0 0 0 4px rgba(37, 99, 235, 0.14);

    /* type */
    --pg-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
        'Noto Sans', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    --pg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* layout */
    --pg-max: 1140px;
    --pg-max-narrow: 760px;
    --pg-header-h: 68px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --pg-bg: #0b1120;
        --pg-surface: #131c31;
        --pg-surface-2: #1b2740;
        --pg-border: #26324b;
        --pg-border-strong: #33405d;
        --pg-text: #eef2f9;
        --pg-text-2: #9fb0cc;
        --pg-text-3: #7488a8;
        --pg-accent: var(--pg-blue-500);
        --pg-accent-hover: var(--pg-blue-400);
        --pg-blue-50: #14203a;

        /* White on the lifted blue-500 measures about 3.7 to 1, which is short
         * of the 4.5 a 15px button label needs. Dark ink on the same blue
         * clears it comfortably, so the label colour follows the accent rather
         * than the button rule hardcoding white. */
        --pg-accent-contrast: #050a14;

        --pg-inv-bg: #080e1b;
        --pg-inv-surface: #131c31;
        --pg-inv-border: #26324b;

        --pg-green-100: #12301f;
        --pg-green-800: #86efac;
        --pg-amber-100: #35240a;
        --pg-amber-800: #fcd34d;
        --pg-red-100: #3a1414;
        --pg-red-800: #fca5a5;
        --pg-blue-100: #17274a;
    }
}