/* ===========================================
   INNERAXISLABS DESIGN SYSTEM - TOKENS
   Theme: ARCHITECTURAL TRUTH
   "Rough edges, clear truth" — Raw materials
   meet razor-sharp typography
   =========================================== */

:root {
    /* ===================
     COLORS - DEEPENED FOR MATERIALITY
     =================== */

    /* Backgrounds - Warm, natural stone */
    --bone-base: #FAF8F5;
    --bone-surface: #F2EDE8;

    /* Borders & Neutrals - Travertine palette */
    --travertine: #E8E2DA;
    --stone-warm: #D4C9BC;
    --stone-medium: #C5BAA8;

    /* Text (Ink) - DEEPENED for AAA contrast */
    --ink: #141412;
    /* Richer warm charcoal */
    --ink-soft: #3A3A35;
    /* Slightly deeper for better contrast */
    --ink-muted: #7A7A72;

    /* Onyx Palette - Deep architectural blacks */
    --onyx-rough: #0F0F0D;
    /* Almost black, felt texture */
    --onyx-polished: #1A1A18;
    /* Original ink, now for accents */

    /* Accent Colors */
    --accent-clay: #C4A484;
    --accent-clay-dark: #A68968;
    --accent-clay-light: #D4B494;
    --accent-sage: #9CAF94;
    --accent-sage-dark: #7C9F74;

    /* Semantic Colors */
    --error: #B85C5C;
    --success: var(--accent-sage);
    --warning: #C4A474;

    /* ===================
     TYPOGRAPHY
     =================== */

    /* Font Families */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'DM Sans', system-ui, sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;

    /* Letter Spacing - Slightly more airy for textured backgrounds */
    --letter-spacing-tighter: -0.04em;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-breathe: 0.02em;
    /* NEW: Headings on texture */
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
    --letter-spacing-widest: 0.15em;

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* ===================
     SPACING - ARCHITECTURAL PROPORTIONS
     =================== */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    --space-6xl: 10rem;
    /* NEW: Gallery-level spacing */
    --space-7xl: 12rem;
    /* NEW: Monumental spacing */

    /* ===================
     LAYOUT
     =================== */

    --max-width: 1200px;
    --max-width-narrow: 800px;
    --max-width-text: 60ch;
    --max-width-breakout: 100vw;
    /* NEW: Full-bleed breakout */

    /* ===================
     BORDERS & EFFECTS - HONED STONE EDGES
     =================== */

    --border-radius: 2px;
    --border-width: 1px;
    --border-color: var(--travertine);
    --border-subtle: 1px solid var(--travertine);
    --border-strong: 1px solid var(--stone-warm);

    /* Radius shortcuts */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;

    /* Shadows - Letterpress / Honed Stone Effect */
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.02);

    /* Card shadow - mimics honed stone edge, NOT drop shadow */
    --shadow-card:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 0 0 1px var(--travertine);

    /* Letterpress indent - subtle pressed-in feeling */
    --shadow-letterpress:
        inset 0 1px 2px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.5);

    /* Elevated - for hover states, still subtle */
    --shadow-elevated:
        0 4px 12px rgba(20, 20, 18, 0.06),
        0 1px 3px rgba(20, 20, 18, 0.04);

    /* ===================
     TRANSITIONS
     =================== */

    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-hover: all 300ms ease;
    --transition-fade: opacity 500ms ease-out;
    --transition-reveal: opacity 0.8s ease-out, transform 0.8s ease-out;

    /* ===================
     TEXTURES (as data URIs for backgrounds)
     These create the "thick paper" / "honed limestone" feel
     =================== */

    --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}