/**
 * lmin CSS Variables — Design Tokens
 *
 * Single :root source of truth for ALL lmin design tokens (audit L-3):
 * fluid spacing, base palette, the My-Links token family, and the
 * Dashboard v2 "Quiet Modernism" tokens.
 *
 * @package lmin
 */

:root {
    /* ============================================
       SPACE VARIABLES (Fluid Spacing)
       All values use clamp() for responsive sizing
       ============================================ */

    /* Space Variables — Utopia.fyi fluid space scale (320/16 → 1240/20)
       @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);   /* 4px → 5px */
    --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);     /* 8px → 10px */
    --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);    /* 12px → 15px */
    --space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);           /* 16px → 20px */
    --space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);       /* 24px → 30px */
    --space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);           /* 32px → 40px */
    --space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);         /* 48px → 60px */
    --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);           /* 64px → 80px */
    --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);         /* 96px → 120px */
    /* One-up pairs — for sections where mobile should feel tight, desktop airy */
    --space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
    --space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);
    --space-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
    --space-s-m: clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);
    --space-m-l: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
    --space-l-xl: clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);
    --space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
    --space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);
    /* Custom pair — page gutter / section rhythm */
    --space-s-l: clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem);         /* 16px → 40px */

    /* ============================================
       COLOR VARIABLES — Base palette
       ============================================ */

    /* Contrast Colors */
    --contrast: #1d2327;                                    /* Primary text (dead GP --gs-colorcolor1 var inlined; its fallback was always the live value) */
    --contrast-2: #575760;                                  /* Secondary text */
    --contrast-3: #b2b2be;                                  /* Tertiary/muted */

    /* Base Colors */
    --base: #f0f0f0;                                        /* Light gray */
    --base-2: #f7f8f9;                                      /* Lighter gray */
    --base-3: #ffffff;                                      /* White */

    /* Accent Color */
    --accent: var(--wp--preset--color--brand, #2271b1);    /* WordPress brand blue */

    /* ============================================
       lmin SPECIFIC VARIABLES
       ============================================ */

    /* Container */
    --lmin-container-max: 1400px;
    --lmin-container-header-max: 1480px;

    /* Border Radius — canonical values (formerly duplicated in lmin-links.css). */
    --lmin-radius-sm: 0.375rem;
    --lmin-radius-md: 0.5rem;
    --lmin-radius-lg: 0.75rem;
    --lmin-radius-xl: 1rem;
    --lmin-radius-2xl: 1.25rem;
    --lmin-radius-full: 9999px;

    /* Shadows — canonical values; --lmin-shadow-hover is dashboard-v2's card
       hover and keeps its original value. */
    --lmin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --lmin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --lmin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --lmin-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --lmin-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.04); /* Dashboard v2 card hover */

    /* Transitions — canonical values */
    --lmin-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --lmin-transition-slow: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
       MY LINKS TOKEN FAMILY
       ============================================ */

    /* Primary Accent - #3B82F6 (Blue) */
    --lmin-accent: #3B82F6;
    --lmin-accent-hover: #2563EB;
    --lmin-accent-light: #60A5FA;
    --lmin-accent-dark: #1D4ED8;
    --lmin-accent-bg: #EFF6FF;
    --lmin-accent-border: #BFDBFE;
    --lmin-accent-shadow: rgba(59, 130, 246, 0.25);

    /* Slate Gray Scale */
    --lmin-slate-900: #0F172A;
    --lmin-slate-800: #1E293B;
    --lmin-slate-700: #334155;
    --lmin-slate-600: #475569;
    --lmin-slate-500: #64748B;
    --lmin-slate-400: #94A3B8;
    --lmin-slate-300: #CBD5E1;
    --lmin-slate-200: #E2E8F0;
    --lmin-slate-100: #F1F5F9;
    --lmin-slate-50: #F8FAFC;

    /* Semantic Colors */
    --lmin-success: #22C55E;
    --lmin-success-bg: #DCFCE7;
    --lmin-success-border: #86EFAC;
    --lmin-success-dark: #15803D;

    --lmin-warning: #F59E0B;
    --lmin-warning-bg: #FEF3C7;
    --lmin-warning-border: #FDE68A;
    --lmin-warning-dark: #A16207;

    --lmin-error: #EF4444;
    --lmin-error-bg: #FEE2E2;
    --lmin-error-border: #FECACA;
    --lmin-error-dark: #B91C1C;

    --lmin-tracking: #7C3AED;
    --lmin-tracking-bg: #7C3AED;
    --lmin-tracking-border: #8B5CF6;

    /* Accent-derived shadows */
    --lmin-shadow-accent: 0 4px 12px var(--lmin-accent-shadow);
    --lmin-shadow-card-hover: 0 20px 40px -8px var(--lmin-accent-shadow), 0 8px 16px -4px rgba(0, 0, 0, 0.15);

    /* Utopia.fyi fluid type scale (320/16 → 1240/20, ratio 1.2 → 1.25)
       SINGLE SOURCE OF TRUTH for font-size. All typography must use these
       tokens (font-size-centralization-plan.md).
       DOCUMENTED EXCEPTION (do not tokenize): icon glyphs sized to their
       bounding box — .dashicons font-size rules, modal ✕ close buttons,
       and empty-state decorative icons (e.g. 3.5rem).
       @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
    --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
    --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
    --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
    --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
    --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
    --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
    --step-6: clamp(2.986rem, 2.366rem + 3.0998vw, 4.7684rem);

    /* Font Families */
    --lmin-font-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lmin-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;

    /* Bold Bento brand palette + gradients (research/homepage-fonts-colors-fluid-scale.md §2) */
    --lmin-blue-400: #60A5FA;
    --lmin-blue-500: #3B82F6;
    --lmin-blue-600: #2563EB;
    --lmin-blue-700: #1D4ED8;
    --lmin-indigo-500: #6366F1;
    --lmin-indigo-600: #4F46E5;
    --lmin-cyan-400: #22D3EE;
    --lmin-gradient-hero: linear-gradient(135deg, #2563EB 0%, #4F46E5 55%, #6366F1 100%);
    --lmin-gradient-text: linear-gradient(92deg, #2563EB 0%, #4F46E5 60%, #06B6D4 100%);
    --lmin-gradient-card: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(79, 70, 229, 0.04));

    /* ============================================
       QUIET MODERNISM TOKENS (Dashboard v2)
       ============================================ */

    /* Background hierarchy */
    --color-bg:             var(--base-2, #F8FAFC);
    --color-surface:        var(--base-3, #FFFFFF);
    --color-surface-raised: #F1F5F9;

    /* Borders */
    --color-border:       var(--base, #D8DDE9);
    --color-border-hover: #CBD5E1;

    /* Text */
    --color-text:       var(--contrast, #64748B);
    --color-text-muted: var(--contrast-2, #94A3B8);

    /* Accent */
    --color-accent:        #3B82F6;
    --color-accent-text:   #2563EB; /* WCAG AA for body text on white (Sentinel #2) */
    --color-accent-hover:  #2563EB;
    --color-accent-fg:     #FFFFFF;
    --color-accent-subtle: #EFF6FF;

    /* Semantic */
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-danger:  #DC2626;

    /* Radii — literal values. Do NOT alias to --lmin-radius-*: keep this
       family independent of the --lmin-radius-* rem values above. */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* ============================================
       NEOBRUTALISM TOKENS (--nb-* namespace)
       Consumed by home-b-bold-bento.css (Phase 1).
       Phase 2 (nav) and Phase 3 (app pages) adopt
       selectively. Revertable: delete this block +
       revert home-b-bold-bento.css.
       ============================================ */

    /* Borders — hard, solid, dark */
    --nb-border-width: 2px;
    --nb-border-color: var(--lmin-slate-900, #0F172A);
    --nb-border: var(--nb-border-width) solid var(--nb-border-color);

    /* Shadows — offset hard, no blur. Offset matches
       press translate distance (see --nb-shadow-offset). */
    --nb-shadow-offset: 4px;
    --nb-shadow-color: var(--lmin-slate-900, #0F172A);
    --nb-shadow: 4px 4px 0 var(--nb-shadow-color);
    --nb-shadow-sm: 2px 2px 0 var(--nb-shadow-color);
    --nb-shadow-lg: 6px 6px 0 var(--nb-shadow-color);
    /* Press = shadow collapsed to zero offset */
    --nb-shadow-press: 0 0 0 var(--nb-shadow-color);

    /* Radii — small or none. Kill pillowy --lmin-radius-2xl. */
    --nb-radius: 0;       /* cards, cells, sections */
    --nb-radius-sm: 4px;  /* inputs, buttons, badges, icons */

    /* Flat accents — saturated, no gradients */
    --nb-accent: var(--lmin-blue-600, #2563EB);
    --nb-accent-hover: var(--lmin-blue-700, #1D4ED8);
    --nb-accent-fg: #FFFFFF;
    --nb-accent-2: var(--lmin-indigo-600, #4F46E5);

    /* Transition — fast snappy for press */
    --nb-transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;

    /* Focus — offset solid outline (part of the aesthetic) */
    --nb-focus-width: 2px;
    --nb-focus-color: var(--lmin-blue-600, #2563EB);
    --nb-focus-offset: 2px;
    --nb-focus-outline: var(--nb-focus-width) solid var(--nb-focus-color);
    /* Focus on dark surfaces — #2563EB fails 1.4.11 (3:1) on #0F172A footer.
       White outline passes 1.4.11 on the dark footer background. */
    --nb-focus-color-on-dark: #FFFFFF;
    --nb-focus-outline-on-dark: var(--nb-focus-width) solid var(--nb-focus-color-on-dark);

    /* Button padding — standardized across all surfaces.
       --space-2xs = 8→10px vertical, --space-m = 24→30px horizontal.
       Small variant for compact controls (pagination, toolbar, bulk bar). */
    --nb-btn-padding-y: var(--space-2xs);
    --nb-btn-padding-x: var(--space-m);
    --nb-btn-padding-y-sm: var(--space-3xs);
    --nb-btn-padding-x-sm: var(--space-s);
}

/* ============================================
   DARK THEME TOKEN OVERRIDES
   Only --nb-* tokens are overridden here.
   Overridden tokens (--nb-border-color,
   --nb-shadow-color + derived) are consumed by
   home-b-bold-bento.css + homepage footer border.
   --nb-accent / --nb-accent-fg are additionally
   consumed by style.css current-menu-item (lines
   164-167) but intentionally NOT overridden here —
   no app-page leakage.
   Scoped overrides for chrome (style.css) and
   homepage content (home-b-bold-bento.css) handle
   non-nb token consumers.
   ============================================ */
[data-theme="dark"] {
    --nb-border-color: #E2E8F0;
    --nb-shadow-color: #E2E8F0;
    --nb-border: var(--nb-border-width) solid #E2E8F0;
    --nb-shadow: 4px 4px 0 #E2E8F0;
    --nb-shadow-sm: 2px 2px 0 #E2E8F0;
    --nb-shadow-lg: 6px 6px 0 #E2E8F0;
    --nb-shadow-press: 0 0 0 #E2E8F0;
}