/*
 * Design tokens from DESIGN.md (ux-lldd-2026-09-14). Light theme only: no dark token.
 * Pixel values of DESIGN.md are converted to rem (16px = 1rem), except borders and the focus ring.
 */
:root {
    /* Surfaces */
    --color-surface-ground: #FFF3E4;
    --color-surface-card: #FFFAF3;
    --color-surface-sunken: #F6E2CF;
    --color-skeleton: #F1DFCC;
    /* Text */
    --color-ink: #3B2314;
    --color-ink-muted: #7A4E36;
    --color-on-ink: #FFFFFF;
    /* Action */
    --color-primary: #C2410C;
    --color-on-primary: #FFFFFF;
    --color-primary-strong: #9A3412;
    --color-primary-soft: #FDE2D3;
    --color-on-primary-soft: #8A2E08;
    /* Sun */
    --color-sun: #FFC53D;
    --color-sun-soft: #FFF0C2;
    --color-on-sun-soft: #7A5200;
    --color-sun-border: #E0A500;
    --color-sun-strong: #9A6A00;
    /* Olive */
    --color-olive: #4D6B24;
    --color-olive-soft: #EAF0DC;
    /* Lines */
    --color-line: #F1D9C2;
    --color-line-strong: #E3BFA0;
    --color-line-field: #A0704F;
    --color-star-off: #EAD7C4;
    --color-waveform-idle: #E9B99F;
    /* Serious */
    --color-danger: #991B1B;
    /* Focus */
    --color-focus-ring: #3B2314;
    --color-focus-halo: #FFFFFF;
    --color-focus-ring-on-dark: #FFFFFF;
    /* Veils and shadows */
    --color-scrim: #3B231473;
    --color-viewer-ground: #000000;
    --color-caption-ground: #000000B3;
    --color-shadow-primary: #C2410C40;
    /* Avatars */
    --color-avatar-1: #C2410C;
    --color-avatar-2: #4D6B24;
    --color-avatar-3: #8B5A2B;
    --color-avatar-4: #6B4FA0;
    --color-avatar-5: #B03060;

    /* Typography */
    --font-family: ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif;
    --font-display: 900 2.5rem/1.02 var(--font-family);
    --letter-spacing-display: -0.02em;
    --font-headline: 900 1.75rem/1.1 var(--font-family);
    --font-capture-title: 900 1.375rem/1.1 var(--font-family);
    --font-event-title: 900 1.25rem/1.15 var(--font-family);
    --font-title-section: 900 1.1875rem/1.2 var(--font-family);
    --font-title-card: 800 1rem/1.25 var(--font-family);
    --font-body-story: 500 1.0625rem/1.55 var(--font-family);
    --font-body: 500 1rem/1.4 var(--font-family);
    --font-input: 500 1rem/1.3 var(--font-family);
    --font-response: 700 1.0625rem/1.4 var(--font-family);
    --font-label: 700 0.875rem/1.3 var(--font-family);
    --font-button: 900 1rem/1.1 var(--font-family);
    --font-caption: 600 0.875rem/1.35 var(--font-family);
    --font-eyebrow: 800 0.75rem/1.2 var(--font-family);
    --letter-spacing-eyebrow: 0.08em;
    --font-badge: 900 0.75rem/1.2 var(--font-family);
    --font-mode-label: 800 0.75rem/1.2 var(--font-family);
    --font-tab-label: 700 0.75rem/1.2 var(--font-family);
    --font-dropcap: 900 1.875rem/1 var(--font-family);

    /* Radii */
    --radius-xs: 0.375rem;
    --radius-sm: 0.875rem;
    --radius-md: 1.25rem;
    --radius-lg: 1.5rem;
    --radius-xl: 1.75rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --margin-mobile: 1.125rem;
    --touch-min: 2.75rem;
    --decision-gap: 0.75rem;
    --tabbar-min-height: 3.5rem;
    --sidenav-width: 15.5rem;
    --list-pane-width: 23.75rem;
    --content-max: 45rem;
    /* Breakpoints (documentation only: custom properties cannot be used in media queries). */
    --breakpoint-narrow: 22.5rem;
    --breakpoint-desktop: 64rem;

    /* Elevation */

    /* Motion */
    --motion-duration-fast: 120ms;
    --motion-duration-slow: 240ms;
    --motion-easing: cubic-bezier(0.25, 0.8, 0.35, 1);
    --motion-scale-max: 1.04;

    /* Focus ring */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-halo-width: 2px;
}