/* ============================================================================
   SelfieDoc Design System 2.0 — canonical token layer
   ----------------------------------------------------------------------------
   ONE source of truth for colour, type, spacing, radius, elevation, motion and
   z-index. Page stylesheets alias their local variables to these tokens (with a
   literal fallback), so every surface resolves to the same visual language while
   existing rules keep working unchanged. Load this FIRST on every page.
   Do not hardcode new values in page CSS — reference a --ds-* token.
   ============================================================================ */

:root {
    /* ---- Colour: brand ---- */
    --ds-primary: #007aff;
    --ds-primary-hover: #0062cc;
    --ds-primary-pressed: #0052ad;
    --ds-primary-soft: rgba(0, 122, 255, 0.12);
    --ds-on-primary: #ffffff;

    /* ---- Colour: semantic ---- */
    --ds-success: #34c759;
    --ds-success-soft: rgba(52, 199, 89, 0.12);
    --ds-warning: #ff9500;
    --ds-warning-soft: rgba(255, 149, 0, 0.14);
    --ds-danger: #ff3b30;
    --ds-danger-soft: rgba(255, 59, 48, 0.10);
    --ds-info: #007aff;
    --ds-info-soft: rgba(0, 122, 255, 0.10);

    /* ---- Colour: neutrals & surfaces ---- */
    --ds-bg-canvas: #f5f5f7;
    --ds-surface: #ffffff;
    --ds-surface-sunken: #f2f2f5;
    --ds-ink: #1d1d1f;
    --ds-ink-secondary: #86868b;
    --ds-ink-tertiary: #a1a1a6;
    --ds-border: #e5e5ea;
    --ds-border-strong: #d1d1d6;

    /* ---- Colour: interaction states ---- */
    --ds-hover-tint: rgba(15, 23, 42, 0.04);
    --ds-pressed-tint: rgba(15, 23, 42, 0.08);
    --ds-disabled-ink: #b0b0b5;
    --ds-focus-ring: rgba(0, 122, 255, 0.5);
    --ds-overlay: rgba(17, 24, 39, 0.45);
    --ds-overlay-blur: saturate(180%) blur(20px);

    /* ---- Typography ---- */
    --ds-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ds-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

    --ds-text-display: 40px;
    --ds-text-h1: 32px;
    --ds-text-h2: 24px;
    --ds-text-h3: 20px;
    --ds-text-body: 15px;
    --ds-text-small: 13px;
    --ds-text-caption: 11px;

    --ds-leading-tight: 1.15;
    --ds-leading-snug: 1.35;
    --ds-leading-normal: 1.55;

    --ds-weight-regular: 400;
    --ds-weight-medium: 550;
    --ds-weight-semibold: 650;
    --ds-weight-bold: 750;
    --ds-weight-heavy: 850;

    --ds-tracking-tight: -0.025em;
    --ds-tracking-normal: 0;
    --ds-tracking-wide: 0.06em;

    /* ---- Spacing: single 4px-based scale ---- */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;
    --ds-space-16: 64px;

    /* ---- Radius: single scale ---- */
    --ds-radius-xs: 6px;
    --ds-radius-sm: 10px;
    --ds-radius-md: 14px;
    --ds-radius-lg: 20px;
    --ds-radius-xl: 28px;
    --ds-radius-pill: 999px;

    /* ---- Elevation: single shadow system ---- */
    --ds-shadow-1: 0 4px 24px -6px rgba(0, 0, 0, 0.06), 0 2px 10px -2px rgba(0, 0, 0, 0.04);
    --ds-shadow-2: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
    --ds-shadow-3: 0 30px 60px -12px rgba(17, 24, 39, 0.18);
    --ds-shadow-button: 0 8px 20px rgba(0, 122, 255, 0.25);

    /* ---- Motion: single easing + duration system ---- */
    --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ds-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ds-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ds-duration-fast: 120ms;
    --ds-duration-base: 200ms;
    --ds-duration-slow: 320ms;
    --ds-transition-base: var(--ds-duration-base) var(--ds-ease-standard);

    /* ---- Layout ---- */
    --ds-container: 1280px;
    /* Single source of truth for the sticky app-header height. Every sticky
       offset and every "one-screen" height calc derives from this so bars never
       gap/overlap and the checkout column never clips the footer/CTA. The header
       is 64px below the desktop breakpoint and 68px at >=1024px (see account.css). */
    --ds-header-h: 64px;

    /* ---- Z-index scale ---- */
    --ds-z-sticky: 100;
    --ds-z-dropdown: 800;
    --ds-z-overlay: 900;
    --ds-z-modal: 1000;
    --ds-z-toast: 1100;
    --ds-z-tooltip: 1200;
}

/* ---- Global primitives shared by every page that loads the token layer ---- */
::selection {
    background: var(--ds-primary-soft);
}

/* Canonical keyboard focus ring — page-level rules with higher specificity still win. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--ds-focus-ring);
    outline-offset: 2px;
}

/* Smooth cross-document navigation so the app reads as one product, not separate
   pages. No-ops on browsers without multi-page View Transitions; degrades cleanly. */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}