/**
 * DESIGN-SSOT-002 Design Tokens
 * Source: STYLE_TILE_V1_TOKENS.md
 * Task: OCTOPUS-RUN-0082-LANE-A
 *
 * These tokens are the SSOT for EISLAW privacy results page styling.
 * DO NOT modify without updating STYLE_TILE_V1_TOKENS.md first.
 */

:root {
    /* =========================================
       COLOR TOKENS (STYLE_TILE_V1_TOKENS.md)
       ========================================= */

    /* Neutrals (paper + ink) */
    --color-surface-paper: #F8F7F2;
    --color-surface-paper-muted: #E5E3DB;
    --color-ink-primary: #1D2534;
    --color-ink-secondary: #232934;
    --color-ink-muted: #5F6062;
    --color-border-subtle: #D1C8B7;

    /* Depth / cards */
    --color-surface-card-dark: #343A41;
    --color-surface-card-dark-alt: #3C424B;
    --color-ink-on-dark: #F8F7F2;
    --color-border-on-dark: #7D8186;

    /* Accent (burnt orange family) */
    --color-accent-primary: #A85B1C;
    --color-accent-primary-deep: #563025;

    /* Warm supporting accents (use sparingly) */
    --color-warm-sand: #D1C8B7;
    --color-warm-sand-deep: #C6B69D;
    --color-warm-mustard: #A9872A;
    --color-warm-mustard-soft: #C5AD6F;

    /* Tier colors (mapped from existing tier system) */
    --color-tier-yellow-bg: #FEF3C7;
    --color-tier-yellow-border: #EAB308;
    --color-tier-yellow-text: #854D0E;

    --color-tier-orange-bg: #FFEDD5;
    --color-tier-orange-border: #F97316;
    --color-tier-orange-text: #9A3412;

    --color-tier-red-bg: #FEE2E2;
    --color-tier-red-border: #DC2626;
    --color-tier-red-text: #7F1D1D;

    /* =========================================
       TYPOGRAPHY TOKENS (STYLE_TILE_V1_TOKENS.md)
       ========================================= */

    /* Font families */
    --font-stack-serif: "Fedra Serif Hebrew", "Noto Serif Hebrew", "Frank Ruhl Libre", "Times New Roman", serif;
    --font-stack-sans: "Fedra Sans Hebrew", "Noto Sans Hebrew", "Assistant", "Arial", sans-serif;

    /* Font sizes (desktop) */
    --font-size-h1: clamp(28px, 4vw, 48px);
    --font-size-h2: clamp(22px, 3vw, 32px);
    --font-size-h3: clamp(18px, 2.5vw, 24px);
    --font-size-body: clamp(15px, 1.2vw, 18px);
    --font-size-caption: 14px;
    --font-size-button: 16px;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.3;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;

    /* =========================================
       SPACING TOKENS (8px rhythm)
       ========================================= */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;

    /* =========================================
       RADIUS / BORDER / SHADOW TOKENS
       ========================================= */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* =========================================
       LAYOUT TOKENS (HERO_MODULE_SPEC.md)
       ========================================= */
    --hero-outer-padding: 64px;
    --hero-column-gap: 32px;
    --hero-content-columns: 7; /* out of 12 */
    --hero-card-columns: 5; /* out of 12 */

    /* Mobile breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;

    /* Accessibility */
    --touch-target-min: 48px;
    --focus-outline-width: 3px;
    --focus-outline-offset: 2px;
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override tokens for dark mode if needed */
    }
}