/* ==========================================================================
   INDIGO HARVEST — DESIGN TOKENS
   The single source of truth for ALL visual primitives.
   Load order: AFTER design-system.css, BEFORE components.css.
   ========================================================================== */

/* ---------- Font imports (consolidated, no per-module duplication) ------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* ===================== COLOR — Indigo Harvest ===================== */
    /* Corporate core */
    --ih-midnight:        #10122A;
    --ih-indigo-deep:     #1A2050;
    --ih-indigo-mid:      #283280;
    --ih-indigo:          #4050C0;   /* primary brand */
    --ih-indigo-hover:    #3545A8;
    --ih-indigo-soft:     #6878E0;
    --ih-indigo-tint:     #8090F0;

    /* Accents & neutrals */
    --ih-lime:            #608860;
    --ih-mint:            #A8E0A8;
    --ih-lavender:        #E0E8FF;
    --ih-white-indigo:    #F0F4FF;

    /* Semantic states */
    --ih-success:         #40A040;
    --ih-success-deep:    #2E7A2E;
    --ih-success-tint:    rgba(64,160,64,.12);
    --ih-warning:         #D09020;
    --ih-warning-deep:    #8A6010;
    --ih-warning-tint:    rgba(208,144,32,.12);
    --ih-error:           #C03030;
    --ih-error-deep:      #A02828;
    --ih-error-tint:      rgba(192,48,48,.10);
    --ih-info:            #4050C0;
    --ih-info-tint:       rgba(64,80,192,.10);

    /* ===================== SURFACE / BG ===================== */
    --bg-app:             linear-gradient(135deg, #F0F4FF 0%, #E0E8FF 50%, #F0F4FF 100%);
    --bg-canvas:          #F0F4FF;
    --bg-surface:         #FFFFFF;
    --bg-surface-2:       #F7F9FF;
    --bg-surface-hover:   rgba(224,232,255,.55);
    --bg-overlay:         rgba(16,18,42,.45);
    --bg-glass:           rgba(255,255,255,.72);
    --bg-glass-strong:    rgba(255,255,255,.92);

    /* ===================== INK (text) ===================== */
    --ink-1:              #10122A;   /* primary */
    --ink-2:              #283280;   /* secondary / strong */
    --ink-3:              #5A6080;   /* muted */
    --ink-4:              #8088A8;   /* placeholder, captions */
    --ink-on-brand:       #FFFFFF;
    --ink-link:           #4050C0;
    --ink-link-hover:     #283280;

    /* ===================== BORDER / LINE ===================== */
    --line-1:             rgba(40,50,128,.08);   /* hairline */
    --line-2:             rgba(40,50,128,.14);   /* default */
    --line-3:             rgba(40,50,128,.22);   /* strong */
    --line-brand:         #4050C0;

    /* ===================== TYPOGRAPHY ===================== */
    --font-display:       'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-body:          'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:          'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Type scale (px-based, conservative for ERP density) */
    --fs-display:         28px;
    --fs-h1:              24px;
    --fs-h2:              20px;
    --fs-h3:              17px;
    --fs-h4:              15px;
    --fs-body-lg:         15px;
    --fs-body:            13px;
    --fs-body-sm:         12px;
    --fs-caption:         11px;
    --fs-overline:        10.5px;

    /* Weights */
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;

    /* Line heights */
    --lh-tight:           1.15;
    --lh-snug:            1.35;
    --lh-normal:          1.5;
    --lh-relaxed:         1.65;

    /* Letter spacing */
    --ls-tight:           -0.01em;
    --ls-normal:          0;
    --ls-wide:            0.04em;
    --ls-wider:           0.06em;
    --ls-widest:          0.10em;

    /* ===================== SPACING (4px grid) ===================== */
    --sp-0:               0;
    --sp-1:               4px;
    --sp-2:               8px;
    --sp-3:               12px;
    --sp-4:               16px;
    --sp-5:               20px;
    --sp-6:               24px;
    --sp-7:               32px;
    --sp-8:               40px;
    --sp-9:               48px;
    --sp-10:              64px;
    --sp-11:              80px;
    --sp-12:              96px;

    /* ===================== RADIUS ===================== */
    --r-none:             0;
    --r-xs:               4px;
    --r-sm:               6px;
    --r-md:               8px;
    --r-lg:               12px;
    --r-xl:               16px;
    --r-2xl:              20px;
    --r-3xl:              28px;
    --r-pill:             999px;

    /* ===================== ELEVATION (shadows) ===================== */
    --el-0:               none;
    --el-1:               0 1px 2px rgba(16,18,42,.05), 0 1px 3px rgba(16,18,42,.04);
    --el-2:               0 2px 8px rgba(16,18,42,.06), 0 1px 3px rgba(16,18,42,.04);
    --el-3:               0 4px 16px rgba(16,18,42,.08), 0 2px 6px rgba(16,18,42,.05);
    --el-4:               0 8px 28px rgba(16,18,42,.10), 0 4px 12px rgba(16,18,42,.06);
    --el-5:               0 20px 50px rgba(16,18,42,.18), 0 10px 24px rgba(16,18,42,.10);
    --el-brand:           0 4px 14px rgba(64,80,192,.28);
    --el-brand-strong:    0 6px 20px rgba(64,80,192,.36);
    --el-focus:           0 0 0 3px rgba(64,80,192,.18);
    --el-focus-error:     0 0 0 3px rgba(192,48,48,.18);
    --el-focus-success:   0 0 0 3px rgba(64,160,64,.18);

    /* ===================== Z-INDEX scale ===================== */
    --z-base:             1;
    --z-sticky:           100;
    --z-dropdown:         1000;
    --z-fixed:            1030;
    --z-backdrop:         1040;
    --z-offcanvas:        1045;
    --z-modal:            1050;
    --z-popover:          1060;
    --z-tooltip:          1070;
    --z-toast:            1080;

    /* ===================== MOTION ===================== */
    --d-instant:          80ms;
    --d-fast:             150ms;
    --d-base:             220ms;
    --d-slow:             320ms;
    --d-slower:           480ms;
    --ease-standard:      cubic-bezier(.4, 0, .2, 1);
    --ease-emphasized:    cubic-bezier(.2, 0, 0, 1);
    --ease-decelerate:    cubic-bezier(0, 0, .2, 1);
    --ease-accelerate:    cubic-bezier(.4, 0, 1, 1);

    /* ===================== LAYOUT ===================== */
    --container-sm:       640px;
    --container-md:       768px;
    --container-lg:       1024px;
    --container-xl:       1280px;
    --container-2xl:      1440px;
    --container-fluid:    100%;

    --layout-nav-h:       60px;
    --layout-sidebar-w:   240px;
    --layout-sidebar-w-collapsed: 64px;
    --layout-content-pad: 24px;

    /* ===================== TOUCH TARGETS (a11y) ===================== */
    --touch-min:          44px;
    --control-h-sm:       28px;
    --control-h-md:       36px;
    --control-h-lg:       44px;
    --control-h-xl:       52px;
}

/* ===================== BREAKPOINTS (PostCSS-style refs only;
                                use in @media queries) ===================== */
/* xs:  0     */
/* sm:  640   */
/* md:  768   */
/* lg:  1024  */
/* xl:  1280  */
/* 2xl: 1440  */
/* 3xl: 1920  */

/* ===================== DARK MODE OVERRIDES ===================== */
body.dark-mode,
body.dark-mode.glass-ui {
    --bg-app:             linear-gradient(135deg, #10122A 0%, #1A2050 50%, #10122A 100%);
    --bg-canvas:          #10122A;
    --bg-surface:         rgba(26,32,80,.55);
    --bg-surface-2:       rgba(26,32,80,.35);
    --bg-surface-hover:   rgba(64,80,192,.10);
    --bg-overlay:         rgba(0,0,0,.65);
    --bg-glass:           rgba(26,32,80,.55);
    --bg-glass-strong:    rgba(26,32,80,.78);

    --ink-1:              #F0F4FF;
    --ink-2:              #C8D0F0;
    --ink-3:              #A8B0D8;
    --ink-4:              #7880A8;
    --ink-link:           #8090F0;
    --ink-link-hover:     #C8D0F0;

    --line-1:             rgba(224,232,255,.08);
    --line-2:             rgba(224,232,255,.14);
    --line-3:             rgba(64,80,192,.30);
    --line-brand:         #6878E0;

    --el-1:               0 1px 2px rgba(0,0,0,.30);
    --el-2:               0 2px 8px rgba(0,0,0,.35);
    --el-3:               0 6px 20px rgba(0,0,0,.40);
    --el-4:               0 10px 28px rgba(0,0,0,.50);
    --el-5:               0 24px 60px rgba(0,0,0,.60);
    --el-brand:           0 4px 18px rgba(64,80,192,.40);
    --el-brand-strong:    0 8px 24px rgba(64,80,192,.48);
}

/* ===================== ROOT TYPOGRAPHY APPLY ===================== */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body.glass-ui {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--ink-1);
    background: var(--bg-app);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading defaults — DM Serif Display only on display/h1.
   h2..h4 use IBM Plex Sans semibold (more legible in dense ERP). */
body.glass-ui .display-1,
body.glass-ui .display-2,
body.glass-ui .ds-display,
body.glass-ui h1,
body.glass-ui .h1 {
    font-family: var(--font-display) !important;
    font-weight: var(--fw-regular);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--ink-1);
    margin: 0 0 var(--sp-3);
}
body.glass-ui h2, body.glass-ui .h2 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    color: var(--ink-1);
    margin: 0 0 var(--sp-3);
}
body.glass-ui h3, body.glass-ui .h3 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--ink-1);
    margin: 0 0 var(--sp-2);
}
body.glass-ui h4, body.glass-ui .h4 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h4);
    line-height: var(--lh-snug);
    color: var(--ink-1);
    margin: 0 0 var(--sp-2);
}

/* Numeric / mono contexts */
body.glass-ui code,
body.glass-ui kbd,
body.glass-ui pre,
body.glass-ui samp,
body.glass-ui .ds-mono,
body.glass-ui .kpi-value,
body.glass-ui [class*="-stat-num"],
body.glass-ui [class*="-stat-value"],
body.glass-ui [class*="-kpi-num"] {
    font-family: var(--font-mono) !important;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}