/* ==========================================================================
   Shared Design Tokens — Cross-Project Foundation
   /css/shared/tokens.css

   Single import for any project in the ecosystem.
   Contains ONLY universal scales, system typography, and structural tokens.
   Brand colors, layout dimensions, and project-specific sizing live
   in each project's own tokens.css override file.

   Import order:  shared/tokens.css → project/tokens.css → base.css → …
   ========================================================================== */

:root {

    /* ======================
       COLORS — Universal
       ====================== */
    --color-white:              rgba(255, 255, 255, 1);
    --color-black:              rgba(0, 0, 0, 1);
    --color-transparent:        rgba(0, 0, 0, 0);

    /* ======================
       TYPOGRAPHY — Font Families
       ====================== */
    --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono:   'SF Mono', Monaco, Consolas, 'Courier New', monospace;

    /* ======================
       TYPOGRAPHY — Font Size Scale
       Based on 1rem = 16px
       ====================== */
    --text-xs:      0.75rem;    /* 12px */
    --text-sm:      0.875rem;   /* 14px */
    --text-base:    1rem;       /* 16px */
    --text-lg:      1.125rem;   /* 18px */
    --text-xl:      1.25rem;    /* 20px */
    --text-2xl:     1.5rem;     /* 24px */
    --text-3xl:     1.875rem;   /* 30px */
    --text-4xl:     2.25rem;    /* 36px */

    /* Added: token gap analysis */
    --text-micro:   0.65rem;    /* separator glyphs, micro labels */
    --text-display: 2.5rem;     /* hero icons, large display text */

    /* ======================
       TYPOGRAPHY — Font Weights
       ====================== */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    /* ======================
       TYPOGRAPHY — Line Heights
       ====================== */
    --leading-tight:   1.25;
    --leading-snug:    1.4;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* Added: token gap analysis */
    --leading-none:    1;      /* icon labels, display headings with tight stacking */
    --leading-loose:   1.7;    /* body prose, list items — distinct from leading-relaxed (1.625) */

    /* ======================
       SPACING — 4px Base Scale
       ====================== */
    --spacing-1:    0.25rem;   /* 4px */
    --spacing-2:    0.5rem;    /* 8px */
    --spacing-3:    0.75rem;   /* 12px */
    --spacing-4:    1rem;      /* 16px */
    --spacing-5:    1.25rem;   /* 20px */
    --spacing-6:    1.5rem;    /* 24px */
    --spacing-8:    2rem;      /* 32px */
    --spacing-10:   2.5rem;    /* 40px */
    --spacing-12:   3rem;      /* 48px */
    --spacing-16:   4rem;      /* 64px */
    --spacing-20:   5rem;      /* 80px */

    /* ======================
       BORDER RADIUS
       ====================== */
    --radius-sm:    0.25rem;   /* 4px */
    --radius-md:    0.375rem;  /* 6px */
    --radius-lg:    0.5rem;    /* 8px */
    --radius-xl:    0.75rem;   /* 12px */
    --radius-2xl:   1rem;      /* 16px */
    --radius-full:  9999px;    /* pill shape */

    /* ======================
       SHADOWS — Dark Theme Tuned
       Override in project tokens for light themes.
       ====================== */
    --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:           0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg:           0 10px 15px rgba(0, 0, 0, 0.6);

    /* ======================
       TRANSITIONS
       ====================== */
    --transition-fast:   0.15s ease;
    --transition-base:   0.2s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.3s ease-out;

    /* Added: token gap analysis */
    --transition-slower: 0.4s ease;        /* cross-fade panels, photo viewer opacity */
    --transition-spin:   0.8s linear;      /* loading spinner rotation */

    /* ======================
       Z-INDEX SCALE
       Consistent stacking across all projects.
       ====================== */
    --z-dropdown:   100;
    --z-header:     200;
    --z-sidebar:    200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-tooltip:    500;

    /* ======================
       SIZING — Universal
       px intentional: focus rings don't scale with rem.
       ====================== */
    --size-focus-ring: 3px;

    /* Added: token gap analysis */
    --size-spinner:         40px;  /* infinite scroll / page loading spinner */
    --size-touch-target:    44px;  /* WCAG minimum touch target (close button) */
    --size-touch-target-lg: 52px;  /* large touch target (lightbox nav arrows) */

    /* ======================
       OPACITY SCALE
       Named stops for rgba alpha channels.
       ====================== */
    --opacity-subtle:   0.2;
    --opacity-light:    0.3;
    --opacity-medium:   0.5;
    --opacity-heavy:    0.7;

    /* Added: token gap analysis */
    --opacity-dim:      0.4;   /* dimmed thumbnail default state */
    --opacity-hover:    0.85;  /* lightbox CTA link hover */

    /* ======================
       ASPECT RATIOS
       ====================== */

    /* Added: token gap analysis */
    --aspect-ratio-3-4: 133.33%; /* 4:3 portrait — padding-top intrinsic ratio trick */

}