/* ================================================================
   KN8X Platform — Design System Tokens
   Version: 1.0.0
   ================================================================
   Comprehensive CSS custom properties for the KN8X design system.
   Import this file BEFORE component-specific styles.
   ================================================================ */

:root {

    /* ============================================================
       COLORS — Primary (KN8X Brand Blue)
       ============================================================ */
    --color-primary-50:  #e8f0fe;
    --color-primary-100: #c6dafc;
    --color-primary-200: #a1c2fa;
    --color-primary-300: #7baaf7;
    --color-primary-400: #5e97f5;
    --color-primary-500: #4285f4;
    --color-primary-600: #3b78e7;
    --color-primary-700: #3367d6;
    --color-primary-800: #2a56c6;
    --color-primary-900: #1a3fa0;

    --color-primary:       var(--color-primary-500);
    --color-primary-hover: var(--color-primary-700);

    /* ============================================================
       COLORS — Secondary (Slate/Neutral Blue-Grey)
       ============================================================ */
    --color-secondary-50:  #f8fafc;
    --color-secondary-100: #f1f5f9;
    --color-secondary-200: #e2e8f0;
    --color-secondary-300: #cbd5e1;
    --color-secondary-400: #94a3b8;
    --color-secondary-500: #64748b;
    --color-secondary-600: #475569;
    --color-secondary-700: #334155;
    --color-secondary-800: #1e293b;
    --color-secondary-900: #0f172a;

    --color-secondary:       var(--color-secondary-500);
    --color-secondary-hover: var(--color-secondary-700);

    /* ============================================================
       COLORS — Semantic
       ============================================================ */
    /* Success — Green */
    --color-success-50:  #e6f4ea;
    --color-success-100: #ceead6;
    --color-success-200: #a8dab5;
    --color-success-300: #81c995;
    --color-success-400: #5bb974;
    --color-success-500: #0f9d58;
    --color-success-600: #0d8a4c;
    --color-success-700: #0b7840;
    --color-success-800: #095e33;
    --color-success-900: #064425;

    --color-success:       var(--color-success-500);
    --color-success-hover: var(--color-success-700);

    /* Danger — Red */
    --color-danger-50:  #fce8e6;
    --color-danger-100: #facec8;
    --color-danger-200: #f5a8a0;
    --color-danger-300: #ee8177;
    --color-danger-400: #e8655a;
    --color-danger-500: #d93025;
    --color-danger-600: #c5221f;
    --color-danger-700: #a50e0e;
    --color-danger-800: #860b0b;
    --color-danger-900: #5c0707;

    --color-danger:       var(--color-danger-500);
    --color-danger-hover: var(--color-danger-700);

    /* Warning — Amber */
    --color-warning-50:  #fef7e0;
    --color-warning-100: #feeab3;
    --color-warning-200: #fedd81;
    --color-warning-300: #fed04e;
    --color-warning-400: #fdc628;
    --color-warning-500: #f9a825;
    --color-warning-600: #f09d21;
    --color-warning-700: #e58e1a;
    --color-warning-800: #d97f14;
    --color-warning-900: #c26709;

    --color-warning:       var(--color-warning-500);
    --color-warning-hover: var(--color-warning-700);

    /* Info — Teal */
    --color-info-50:  #e0f7fa;
    --color-info-100: #b2ebf2;
    --color-info-200: #80deea;
    --color-info-300: #4dd0e1;
    --color-info-400: #26c6da;
    --color-info-500: #00acc1;
    --color-info-600: #0097a7;
    --color-info-700: #00838f;
    --color-info-800: #006978;
    --color-info-900: #004d5a;

    --color-info:       var(--color-info-500);
    --color-info-hover: var(--color-info-700);

    /* ============================================================
       COLORS — Surface & Backgrounds
       ============================================================ */
    --color-surface:          #ffffff;
    --color-surface-alt:      #f8fafc;
    --color-surface-raised:   #ffffff;
    --color-surface-overlay:  rgba(0, 0, 0, 0.5);
    --color-surface-scrim:    rgba(0, 0, 0, 0.32);

    --color-background:       #f1f3f4;
    --color-background-alt:   #e8eaed;

    /* ============================================================
       COLORS — On-Surface (Text / Icons on backgrounds)
       ============================================================ */
    --color-on-surface:            #202124;
    --color-on-surface-secondary:  #5f6368;
    --color-on-surface-disabled:   #9aa0a6;
    --color-on-surface-divider:    #e0e0e0;

    --color-on-primary:       #ffffff;
    --color-on-secondary:     #ffffff;
    --color-on-success:       #ffffff;
    --color-on-danger:        #ffffff;
    --color-on-warning:       #202124;
    --color-on-info:          #ffffff;

    /* ============================================================
       COLORS — Border
       ============================================================ */
    --color-border:        #e0e0e0;
    --color-border-strong: #bdc1c6;
    --color-border-focus:  var(--color-primary-500);

    /* ============================================================
       SPACING — 4px base scale
       ============================================================ */
    --space-0:  0;
    --space-px: 1px;
    --space-0-5: 2px;
    --space-1:  4px;
    --space-1-5: 6px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-9:  36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    /* ============================================================
       TYPOGRAPHY — Font Families
       ============================================================ */
    --font-sans:  'Google Sans', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:  'Google Sans Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --font-display: 'Google Sans Display', 'Google Sans', 'Segoe UI', sans-serif;

    /* ============================================================
       TYPOGRAPHY — Font Sizes
       ============================================================ */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */

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

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

    /* ============================================================
       TYPOGRAPHY — Letter Spacing
       ============================================================ */
    --tracking-tight:  -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;

    /* ============================================================
       BORDERS — Radius
       ============================================================ */
    --radius-none: 0;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ============================================================
       BORDERS — Width
       ============================================================ */
    --border-0:   0;
    --border-1:   1px;
    --border-2:   2px;
    --border-4:   4px;

    /* ============================================================
       SHADOWS — Elevation Levels
       ============================================================ */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-4: 0 4px 12px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.12);
    --shadow-5: 0 8px 24px rgba(0, 0, 0, 0.12), 0 24px 60px rgba(0, 0, 0, 0.16);

    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-ring:  0 0 0 3px rgba(66, 133, 244, 0.3);

    /* ============================================================
       TRANSITIONS
       ============================================================ */
    --duration-fast:   100ms;
    --duration-normal: 200ms;
    --duration-slow:   300ms;
    --duration-slower: 500ms;

    --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:         cubic-bezier(0.4, 0, 1, 1);
    --ease-out:        cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast:   var(--duration-fast) var(--ease-default);
    --transition-normal: var(--duration-normal) var(--ease-default);
    --transition-slow:   var(--duration-slow) var(--ease-default);

    /* ============================================================
       Z-INDEX — Layer System
       ============================================================ */
    --z-base:     0;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-popover:  500;
    --z-toast:    600;

    /* ============================================================
       BREAKPOINTS (reference only — use in @media queries)
       ============================================================
       --bp-sm:  640px
       --bp-md:  768px
       --bp-lg:  1024px
       --bp-xl:  1280px
       --bp-2xl: 1536px
       ============================================================ */

    /* ============================================================
       GRID — 12 Column System
       ============================================================ */
    --grid-columns:    12;
    --grid-gutter:     var(--space-4);
    --grid-max-width:  1280px;

    /* ============================================================
       LAYOUT — Common Dimensions
       ============================================================ */
    --header-height:  64px;
    --sidebar-width:  256px;
    --toolbar-height: 52px;
    --content-max-width: 1280px;
}

/* ================================================================
   DARK MODE OVERRIDES
   ================================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Surface & Backgrounds */
        --color-surface:         #1e1e1e;
        --color-surface-alt:     #252525;
        --color-surface-raised:  #2d2d2d;
        --color-surface-overlay: rgba(0, 0, 0, 0.7);
        --color-surface-scrim:  rgba(0, 0, 0, 0.56);

        --color-background:      #121212;
        --color-background-alt:  #1a1a1a;

        /* On-Surface */
        --color-on-surface:           #e3e3e3;
        --color-on-surface-secondary: #9aa0a6;
        --color-on-surface-disabled:  #5f6368;
        --color-on-surface-divider:   #3c4043;

        /* Primary — lighter shades for readability on dark */
        --color-primary:       #8ab4f8;
        --color-primary-hover: #aecbfa;

        /* Semantic — lighter variants */
        --color-success:       #81c995;
        --color-success-hover: #a8dab5;

        --color-danger:        #f28b82;
        --color-danger-hover:  #f5a8a0;

        --color-warning:       #fdd663;
        --color-warning-hover: #feeab3;

        --color-info:          #78d9ec;
        --color-info-hover:    #a0e7f5;

        /* Borders */
        --color-border:        #3c4043;
        --color-border-strong: #5f6368;
        --color-border-focus:  #8ab4f8;

        /* Shadows (more subtle in dark mode) */
        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.24);
        --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.24);
        --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.28);
        --shadow-4: 0 4px 12px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.32);
        --shadow-5: 0 8px 24px rgba(0, 0, 0, 0.36), 0 24px 60px rgba(0, 0, 0, 0.40);

        --shadow-ring: 0 0 0 3px rgba(138, 180, 248, 0.4);
    }
}

/* ================================================================
   UTILITY — Grid Container
   ================================================================ */
.kn8x-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gutter);
    max-width: var(--grid-max-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.kn8x-grid > .col-1  { grid-column: span 1; }
.kn8x-grid > .col-2  { grid-column: span 2; }
.kn8x-grid > .col-3  { grid-column: span 3; }
.kn8x-grid > .col-4  { grid-column: span 4; }
.kn8x-grid > .col-5  { grid-column: span 5; }
.kn8x-grid > .col-6  { grid-column: span 6; }
.kn8x-grid > .col-7  { grid-column: span 7; }
.kn8x-grid > .col-8  { grid-column: span 8; }
.kn8x-grid > .col-9  { grid-column: span 9; }
.kn8x-grid > .col-10 { grid-column: span 10; }
.kn8x-grid > .col-11 { grid-column: span 11; }
.kn8x-grid > .col-12 { grid-column: span 12; }

@media (max-width: 768px) {
    .kn8x-grid > [class^="col-"] {
        grid-column: span 12;
    }
}