/* ============================================================
   PROJECTCUBE — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow.
   Load this FIRST, before components.css and any page CSS.
   Every other file should reference these variables — never
   hardcode a hex color or px font-size again after this.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ---------- COLOR : neutrals ---------- */
    --pc-ink: #101828;          /* primary text */
    --pc-ink-soft: #475467;     /* secondary text */
    --pc-ink-faint: #98A2B3;    /* placeholder / disabled text */
    --pc-canvas: #F5F6FB;       /* app background */
    --pc-surface: #FFFFFF;      /* card / panel background */
    --pc-surface-alt: #FAFBFF;  /* zebra rows, subtle panels */
    --pc-border: #E4E7EC;
    --pc-border-strong: #D0D5DD;

    /* ---------- COLOR : brand ---------- */
    --pc-primary: #4338CA;          /* indigo — brand */
    --pc-primary-dark: #362FA3;
    --pc-primary-soft: #EEF0FE;
    --pc-accent: #06B6D4;           /* cyan — data / secondary */
    --pc-accent-2: #7C3AED;         /* violet — gradient partner */
    --pc-gradient-brand: linear-gradient(135deg, #4338CA 0%, #7C3AED 100%);
    --pc-gradient-accent: linear-gradient(135deg, #06B6D4 0%, #4338CA 100%);
    --pc-gradient-sheen: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);

    /* ---------- COLOR : signal ---------- */
    --pc-success: #16A34A;
    --pc-success-soft: #EAFBF1;
    --pc-warning: #F59E0B;
    --pc-warning-soft: #FEF6E7;
    --pc-danger: #EF4444;
    --pc-danger-soft: #FEEEEE;
    --pc-info: #0EA5E9;
    --pc-info-soft: #EAF8FF;

    /* ---------- TYPE ---------- */
    --pc-font-display: "Space Grotesk", sans-serif;   /* headings, page titles */
    --pc-font-body: "Inter", sans-serif;                /* everything else */
    --pc-font-mono: "JetBrains Mono", monospace;        /* stat numbers, IDs, dates */

    --pc-text-xs: 0.75rem;    /* 12px — captions, table meta */
    --pc-text-sm: 0.8125rem;  /* 13px — table/body small, form labels */
    --pc-text-base: 0.9375rem;/* 15px — default body */
    --pc-text-md: 1.0625rem;  /* 17px — card titles, emphasized body */
    --pc-text-lg: 1.25rem;    /* 20px — section headings */
    --pc-text-xl: 1.5rem;     /* 24px — page headings */
    --pc-text-2xl: 2rem;      /* 32px — dashboard KPI numbers */
    --pc-text-3xl: 2.75rem;   /* 44px — hero stat / big display numbers */

    --pc-lh-tight: 1.2;
    --pc-lh-normal: 1.5;
    --pc-lh-relaxed: 1.7;

    /* ---------- SPACING (4px base unit) ---------- */
    --pc-space-1: 0.25rem;  /* 4px */
    --pc-space-2: 0.5rem;   /* 8px */
    --pc-space-3: 0.75rem;  /* 12px */
    --pc-space-4: 1rem;     /* 16px */
    --pc-space-5: 1.5rem;   /* 24px */
    --pc-space-6: 2rem;     /* 32px */
    --pc-space-7: 3rem;     /* 48px */
    --pc-space-8: 4rem;     /* 64px */

    /* ---------- RADIUS ---------- */
    --pc-radius-sm: 8px;
    --pc-radius: 12px;
    --pc-radius-lg: 16px;
    --pc-radius-xl: 22px;
    --pc-radius-pill: 999px;

    /* ---------- SHADOW / ELEVATION ---------- */
    --pc-shadow-xs: 0 1px 2px rgba(16,24,40,.05);
    --pc-shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.05);
    --pc-shadow-md: 0 8px 20px -6px rgba(16,24,40,.12);
    --pc-shadow-lg: 0 16px 32px -10px rgba(16,24,40,.18);
    --pc-shadow-3d: 0 24px 48px -14px rgba(16,24,40,.28), 0 0 0 1px rgba(67,56,202,.06);
    --pc-shadow-glow: 0 0 0 4px rgba(67,56,202,.12), 0 12px 24px -8px rgba(67,56,202,.35);

    /* ---------- MOTION ---------- */
    --pc-ease: cubic-bezier(.2,.8,.2,1);
    --pc-duration-fast: .15s;
    --pc-duration: .3s;
    --pc-duration-slow: .5s;

    /* ---------- Z-INDEX SCALE ---------- */
    --pc-z-dropdown: 100;
    --pc-z-sticky: 200;
    --pc-z-modal-backdrop: 900;
    --pc-z-modal: 950;
    --pc-z-loader: 999;
}

/* ============================================================
   BASE TYPOGRAPHY — apply once on <body>, then use the classes
   below wherever templates currently hand-roll font-size.
   ============================================================ */
body.pc-theme {
    font-family: var(--pc-font-body);
    font-weight: 300;
    color: var(--pc-ink);
    background: var(--pc-canvas);
    font-size: var(--pc-text-base);
    line-height: var(--pc-lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.pc-display   { font-family: var(--pc-font-display); font-weight: 500; font-size: var(--pc-text-3xl); line-height: var(--pc-lh-tight); color: var(--pc-ink); letter-spacing: -0.01em; }
.pc-h1        { font-family: var(--pc-font-display); font-weight: 500; font-size: var(--pc-text-xl); line-height: var(--pc-lh-tight); color: var(--pc-ink); letter-spacing: -0.005em; }
.pc-h2        { font-family: var(--pc-font-display); font-weight: 500; font-size: var(--pc-text-lg); line-height: var(--pc-lh-tight); color: var(--pc-ink); }
.pc-h3        { font-family: var(--pc-font-display); font-weight: 500; font-size: var(--pc-text-md); line-height: var(--pc-lh-tight); color: var(--pc-ink); }
.pc-body      { font-family: var(--pc-font-body); font-weight: 300; font-size: var(--pc-text-base); line-height: var(--pc-lh-normal); color: var(--pc-ink); }
.pc-body-sm   { font-family: var(--pc-font-body); font-weight: 300; font-size: var(--pc-text-sm); line-height: var(--pc-lh-normal); color: var(--pc-ink-soft); }
.pc-caption   { font-family: var(--pc-font-body); font-weight: 400; font-size: var(--pc-text-xs); color: var(--pc-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-label     { font-family: var(--pc-font-body); font-weight: 500; font-size: var(--pc-text-sm); color: var(--pc-ink-soft); }
.pc-stat      { font-family: var(--pc-font-mono); font-weight: 500; font-size: var(--pc-text-2xl); color: var(--pc-ink); letter-spacing: -0.01em; }
.pc-stat-lg   { font-family: var(--pc-font-mono); font-weight: 500; font-size: var(--pc-text-3xl); color: var(--pc-ink); letter-spacing: -0.01em; }
.pc-mono      { font-family: var(--pc-font-mono); font-weight: 400; }

.pc-text-primary { color: var(--pc-primary); }
.pc-text-muted   { color: var(--pc-ink-soft); }
.pc-text-success { color: var(--pc-success); }
.pc-text-warning { color: var(--pc-warning); }
.pc-text-danger  { color: var(--pc-danger); }

/* ============================================================
   DARK THEME — toggled by setting data-theme="dark" on <html>.
   Every component already reads these variables, so nothing
   else needs to change. See ui-kit.js for the toggle logic.
   ============================================================ */
[data-theme="dark"] {
    --pc-ink: #E7E9F4;
    --pc-ink-soft: #A6ADC9;
    --pc-ink-faint: #6B7291;
    --pc-canvas: #0F1220;
    --pc-surface: #171B2E;
    --pc-surface-alt: #1C2036;
    --pc-border: #2A2F48;
    --pc-border-strong: #3A4066;

    --pc-primary-soft: rgba(99, 91, 255, .16);
    --pc-success-soft: rgba(22,163,74,.16);
    --pc-warning-soft: rgba(245,158,11,.16);
    --pc-danger-soft: rgba(239,68,68,.16);
    --pc-info-soft: rgba(14,165,233,.16);

    --pc-shadow-sm: 0 1px 3px rgba(0,0,0,.35);
    --pc-shadow-md: 0 8px 20px -6px rgba(0,0,0,.45);
    --pc-shadow-lg: 0 16px 32px -10px rgba(0,0,0,.55);
    --pc-shadow-3d: 0 24px 48px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.15);
    --pc-shadow-glow: 0 0 0 4px rgba(124,58,237,.2), 0 12px 24px -8px rgba(124,58,237,.45);
}
[data-theme="dark"] .pc-skeleton,
[data-theme="dark"] .pc-chart-loading__bar {
    background: linear-gradient(90deg, #232945 25%, #2c3253 37%, #232945 63%);
    background-size: 400% 100%;
}