/*
 * RideShipper design tokens. The brand kit is in /brand/README.md.
 *
 * Brand: the orange mark (#F38C22), a charcoal Open Sans wordmark, white.
 * The site is light by design. It does not switch to a dark palette.
 *
 * Contrast rules (WCAG 2.2 AA):
 *   Text on brand orange is always ink (6.7:1). White on orange fails (2.4:1).
 *   Orange text on white is always --color-brand-deep (5.3:1).
 *   Input borders are at least 3:1 against the surface.
 *
 * Type scale, fluid from 360px upward:
 *   --step--1  0.875rem        meta, captions, table headers
 *   --step-0   1rem            body
 *   --step-1   1.125 to 1.25   lead, card titles
 *   --step-2   1.375 to 1.75   section headings
 *   --step-3   1.75 to 2.5     page titles
 *   --step-4   2.125 to 3.5    home hero, price figures
 *
 * Spacing scale, 4px base: 1 4px, 2 8px, 3 12px, 4 16px, 5 24px, 6 32px,
 * 7 48px, 8 72px, 9 96px.
 */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans-latin-wght-rqCfBeQ.woff2") format("woff2");
}

:root {
    color-scheme: light;

    /* Brand */
    --color-brand: #f38c22;
    --color-brand-hover: #e07a0e;
    --color-brand-active: #cf6f08;
    --color-brand-deep: #a85400;
    --color-brand-tint: #fff4e6;
    --color-brand-tint-strong: #ffe7c7;
    --color-brand-line: #fbd9ae;
    --color-on-brand: #1f1f1f;

    /* Neutrals */
    --color-ink: #1f1f1f;
    --color-text: #333333;
    --color-muted: #5c5c5c;
    --color-bg: #ffffff;
    --color-canvas: #faf8f5;
    --color-surface: #ffffff;
    --color-border: #e4e0da;
    --color-border-strong: #cfc9c0;
    --color-control-border: #8c857c;
    --color-night: #262626;
    --color-night-soft: #333333;
    --color-on-night: #ffffff;
    --color-on-night-muted: #c9c9c9;

    /* Links and focus */
    --color-link: #a85400;
    --color-link-hover: #7d3f00;
    --color-focus: #1d5c8f;

    /* States */
    --color-success: #16794a;
    --color-success-bg: #e8f6ee;
    --color-success-line: #b5dfc6;
    --color-warning: #8a5a00;
    --color-warning-bg: #fff6d9;
    --color-warning-line: #f0d98a;
    --color-danger: #9a2b2b;
    --color-danger-bg: #fdecec;
    --color-danger-line: #f0b9b9;
    --color-info: #1d5c8f;
    --color-info-bg: #eaf3fb;
    --color-info-line: #b9d4ea;

    /* Names kept for templates written against the first design */
    --color-primary: var(--color-brand-deep);
    --color-primary-hover: var(--color-link-hover);
    --color-primary-contrast: #ffffff;
    --color-accent: var(--color-brand);
    --color-accent-hover: var(--color-brand-hover);
    --color-accent-contrast: var(--color-on-brand);
    --color-info-text: var(--color-info);
    --color-warning-text: var(--color-warning);
    --color-tip-bg: var(--color-success-bg);
    --color-tip-text: var(--color-success);
    --color-danger-text: var(--color-danger);
    --color-licence-active-bg: var(--color-success-bg);
    --color-licence-active-text: var(--color-success);
    --color-licence-warning-bg: var(--color-warning-bg);
    --color-licence-warning-text: var(--color-warning);
    --color-licence-inactive-bg: var(--color-danger-bg);
    --color-licence-inactive-text: var(--color-danger);

    /* Type */
    --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font-sans);
    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
    --step-2: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
    --step-3: clamp(1.75rem, 1.48rem + 1.2vw, 2.5rem);
    --step-4: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
    --font-size-sm: var(--step--1);
    --font-size-xl: var(--step-3);
    --leading-body: 1.65;
    --leading-tight: 1.15;

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    /* Shape */
    --measure: 68ch;
    --content-width: 74rem;
    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --control-height: 3rem;
    --header-height: 4.5rem;

    /* Depth */
    --shadow-1: 0 1px 2px rgb(31 31 31 / 6%), 0 1px 3px rgb(31 31 31 / 8%);
    --shadow-2: 0 4px 12px rgb(31 31 31 / 8%), 0 1px 3px rgb(31 31 31 / 6%);
    --shadow-3: 0 18px 40px rgb(31 31 31 / 14%), 0 4px 10px rgb(31 31 31 / 6%);
    --shadow-raise: var(--shadow-3);
    --shadow-brand: 0 6px 16px rgb(243 140 34 / 32%);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --speed: 160ms;
}

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