/**
 * ============================================================
 * CONTEXT.IO DESIGN SYSTEM — Design Tokens
 * Version: 1.0.0
 *
 * A comprehensive token system for building consistent,
 * accessible, and scalable user interfaces.
 * ============================================================
 */

:root {
    /* ========================================================
       COLOR SYSTEM
       ======================================================== */

    /* ----------------------------------------------------------
       Primary Colors
       Main brand color - Sophisticated blue conveying trust,
       innovation, and professionalism
       ---------------------------------------------------------- */
    --color-primary-50:  #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;  /* Base primary */
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary-950: #172554;

    /* ----------------------------------------------------------
       Secondary Colors
       Accent color - Violet/purple for AI innovation feel
       ---------------------------------------------------------- */
    --color-secondary-50:  #f5f3ff;
    --color-secondary-100: #ede9fe;
    --color-secondary-200: #ddd6fe;
    --color-secondary-300: #c4b5fd;
    --color-secondary-400: #a78bfa;
    --color-secondary-500: #8b5cf6;  /* Base secondary */
    --color-secondary-600: #7c3aed;
    --color-secondary-700: #6d28d9;
    --color-secondary-800: #5b21b6;
    --color-secondary-900: #4c1d95;
    --color-secondary-950: #2e1065;

    /* ----------------------------------------------------------
       Neutral Colors (Slate)
       Warm neutrals for text, backgrounds, and borders
       ---------------------------------------------------------- */
    --color-neutral-0:   #ffffff;
    --color-neutral-50:  #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;
    --color-neutral-950: #020617;

    /* ----------------------------------------------------------
       Semantic Colors
       Functional colors for feedback and status
       ---------------------------------------------------------- */

    /* Success - Green */
    --color-success-50:  #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-300: #86efac;
    --color-success-400: #4ade80;
    --color-success-500: #22c55e;  /* Base success */
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;
    --color-success-900: #14532d;

    /* Warning - Amber */
    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-300: #fcd34d;
    --color-warning-400: #fbbf24;
    --color-warning-500: #f59e0b;  /* Base warning */
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;
    --color-warning-900: #78350f;

    /* Error - Red */
    --color-error-50:  #fef2f2;
    --color-error-100: #fee2e2;
    --color-error-200: #fecaca;
    --color-error-300: #fca5a5;
    --color-error-400: #f87171;
    --color-error-500: #ef4444;  /* Base error */
    --color-error-600: #dc2626;
    --color-error-700: #b91c1c;
    --color-error-800: #991b1b;
    --color-error-900: #7f1d1d;

    /* Info - Cyan */
    --color-info-50:  #ecfeff;
    --color-info-100: #cffafe;
    --color-info-200: #a5f3fc;
    --color-info-300: #67e8f9;
    --color-info-400: #22d3ee;
    --color-info-500: #06b6d4;  /* Base info */
    --color-info-600: #0891b2;
    --color-info-700: #0e7490;
    --color-info-800: #155e75;
    --color-info-900: #164e63;


    /* ========================================================
       SEMANTIC COLOR ALIASES (Light Mode)
       Use these for actual implementation
       ======================================================== */

    /* Backgrounds */
    --bg-primary:     var(--color-neutral-0);
    --bg-secondary:   var(--color-neutral-50);
    --bg-tertiary:    var(--color-neutral-100);
    --bg-inverse:     var(--color-neutral-900);
    --bg-brand:       var(--color-primary-500);
    --bg-brand-subtle: var(--color-primary-50);

    /* Foreground / Text */
    --text-primary:    var(--color-neutral-900);
    --text-secondary:  var(--color-neutral-600);
    --text-tertiary:   var(--color-neutral-500);
    --text-disabled:   var(--color-neutral-400);
    --text-inverse:    var(--color-neutral-0);
    --text-brand:      var(--color-primary-600);
    --text-link:       var(--color-primary-600);
    --text-link-hover: var(--color-primary-700);

    /* Borders */
    --border-default:  var(--color-neutral-200);
    --border-subtle:   var(--color-neutral-100);
    --border-strong:   var(--color-neutral-300);
    --border-focus:    var(--color-primary-500);
    --border-error:    var(--color-error-500);
    --border-success:  var(--color-success-500);

    /* Interactive States */
    --interactive-default: var(--color-primary-500);
    --interactive-hover:   var(--color-primary-600);
    --interactive-active:  var(--color-primary-700);
    --interactive-focus:   var(--color-primary-500);


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

    /* ----------------------------------------------------------
       Font Families
       ---------------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    /* ----------------------------------------------------------
       Font Sizes (Based on 16px root)
       Using a modular scale of 1.25 (Major Third)
       ---------------------------------------------------------- */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */
    --text-6xl:  3.75rem;    /* 60px */
    --text-7xl:  4.5rem;     /* 72px */

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

    /* ----------------------------------------------------------
       Line Heights
       ---------------------------------------------------------- */
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;

    /* ----------------------------------------------------------
       Letter Spacing
       ---------------------------------------------------------- */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;

    /* ----------------------------------------------------------
       Heading Presets
       ---------------------------------------------------------- */
    --heading-1-size: var(--text-5xl);
    --heading-1-weight: var(--font-bold);
    --heading-1-leading: var(--leading-tight);
    --heading-1-tracking: var(--tracking-tight);

    --heading-2-size: var(--text-4xl);
    --heading-2-weight: var(--font-bold);
    --heading-2-leading: var(--leading-tight);
    --heading-2-tracking: var(--tracking-tight);

    --heading-3-size: var(--text-3xl);
    --heading-3-weight: var(--font-semibold);
    --heading-3-leading: var(--leading-snug);
    --heading-3-tracking: var(--tracking-normal);

    --heading-4-size: var(--text-2xl);
    --heading-4-weight: var(--font-semibold);
    --heading-4-leading: var(--leading-snug);
    --heading-4-tracking: var(--tracking-normal);

    --heading-5-size: var(--text-xl);
    --heading-5-weight: var(--font-semibold);
    --heading-5-leading: var(--leading-normal);
    --heading-5-tracking: var(--tracking-normal);

    --heading-6-size: var(--text-lg);
    --heading-6-weight: var(--font-semibold);
    --heading-6-leading: var(--leading-normal);
    --heading-6-tracking: var(--tracking-normal);


    /* ========================================================
       SPACING SYSTEM
       Based on 4px grid (0.25rem)
       ======================================================== */
    --space-0:    0;
    --space-px:   1px;
    --space-0-5:  0.125rem;  /* 2px */
    --space-1:    0.25rem;   /* 4px */
    --space-1-5:  0.375rem;  /* 6px */
    --space-2:    0.5rem;    /* 8px */
    --space-2-5:  0.625rem;  /* 10px */
    --space-3:    0.75rem;   /* 12px */
    --space-3-5:  0.875rem;  /* 14px */
    --space-4:    1rem;      /* 16px */
    --space-5:    1.25rem;   /* 20px */
    --space-6:    1.5rem;    /* 24px */
    --space-7:    1.75rem;   /* 28px */
    --space-8:    2rem;      /* 32px */
    --space-9:    2.25rem;   /* 36px */
    --space-10:   2.5rem;    /* 40px */
    --space-11:   2.75rem;   /* 44px */
    --space-12:   3rem;      /* 48px */
    --space-14:   3.5rem;    /* 56px */
    --space-16:   4rem;      /* 64px */
    --space-20:   5rem;      /* 80px */
    --space-24:   6rem;      /* 96px */
    --space-28:   7rem;      /* 112px */
    --space-32:   8rem;      /* 128px */
    --space-36:   9rem;      /* 144px */
    --space-40:   10rem;     /* 160px */
    --space-44:   11rem;     /* 176px */
    --space-48:   12rem;     /* 192px */
    --space-52:   13rem;     /* 208px */
    --space-56:   14rem;     /* 224px */
    --space-60:   15rem;     /* 240px */
    --space-64:   16rem;     /* 256px */


    /* ========================================================
       SIZING SYSTEM
       ======================================================== */
    --size-0:     0;
    --size-1:     0.25rem;
    --size-2:     0.5rem;
    --size-3:     0.75rem;
    --size-4:     1rem;
    --size-5:     1.25rem;
    --size-6:     1.5rem;
    --size-8:     2rem;
    --size-10:    2.5rem;
    --size-12:    3rem;
    --size-16:    4rem;
    --size-20:    5rem;
    --size-24:    6rem;
    --size-32:    8rem;
    --size-40:    10rem;
    --size-48:    12rem;
    --size-56:    14rem;
    --size-64:    16rem;
    --size-full:  100%;
    --size-screen: 100vw;
    --size-min:   min-content;
    --size-max:   max-content;
    --size-fit:   fit-content;


    /* ========================================================
       BORDER RADIUS
       ======================================================== */
    --radius-none: 0;
    --radius-sm:   0.125rem;  /* 2px */
    --radius-md:   0.25rem;   /* 4px */
    --radius-lg:   0.5rem;    /* 8px */
    --radius-xl:   0.75rem;   /* 12px */
    --radius-2xl:  1rem;      /* 16px */
    --radius-3xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;


    /* ========================================================
       SHADOWS
       ======================================================== */
    --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-none: 0 0 #0000;

    /* Focus Ring Shadow */
    --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.5);
    --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.5);


    /* ========================================================
       TRANSITIONS & ANIMATION
       ======================================================== */

    /* Duration */
    --duration-instant: 0ms;
    --duration-fast:    100ms;
    --duration-normal:  200ms;
    --duration-slow:    300ms;
    --duration-slower:  500ms;

    /* Easing */
    --ease-linear:      linear;
    --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-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Common Transitions */
    --transition-colors: color var(--duration-normal) var(--ease-out),
                         background-color var(--duration-normal) var(--ease-out),
                         border-color var(--duration-normal) var(--ease-out);
    --transition-opacity: opacity var(--duration-normal) var(--ease-out);
    --transition-transform: transform var(--duration-normal) var(--ease-out);
    --transition-all: all var(--duration-normal) var(--ease-out);


    /* ========================================================
       Z-INDEX SCALE
       ======================================================== */
    --z-below:    -1;
    --z-base:     0;
    --z-raised:   1;
    --z-dropdown: 10;
    --z-sticky:   20;
    --z-overlay:  30;
    --z-modal:    40;
    --z-popover:  50;
    --z-toast:    60;
    --z-tooltip:  70;
    --z-max:      9999;


    /* ========================================================
       BREAKPOINTS (for reference, use in media queries)
       ======================================================== */
    /*
    --breakpoint-sm:  640px;
    --breakpoint-md:  768px;
    --breakpoint-lg:  1024px;
    --breakpoint-xl:  1280px;
    --breakpoint-2xl: 1536px;
    */


    /* ========================================================
       CONTAINER WIDTHS
       ======================================================== */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1536px;


    /* ========================================================
       COMPONENT-SPECIFIC TOKENS
       ======================================================== */

    /* Buttons */
    --btn-padding-x: var(--space-4);
    --btn-padding-y: var(--space-2-5);
    --btn-padding-x-sm: var(--space-3);
    --btn-padding-y-sm: var(--space-1-5);
    --btn-padding-x-lg: var(--space-6);
    --btn-padding-y-lg: var(--space-3);
    --btn-font-size: var(--text-sm);
    --btn-font-weight: var(--font-medium);
    --btn-radius: var(--radius-lg);
    --btn-focus-ring: var(--shadow-focus);

    /* Inputs */
    --input-padding-x: var(--space-3);
    --input-padding-y: var(--space-2-5);
    --input-font-size: var(--text-sm);
    --input-radius: var(--radius-lg);
    --input-border-width: 1px;
    --input-focus-ring: var(--shadow-focus);

    /* Cards */
    --card-padding: var(--space-6);
    --card-radius: var(--radius-xl);
    --card-shadow: var(--shadow-sm);
    --card-border: 1px solid var(--border-default);

    /* Avatar */
    --avatar-size-sm: var(--size-8);
    --avatar-size-md: var(--size-10);
    --avatar-size-lg: var(--size-12);
    --avatar-size-xl: var(--size-16);

    /* Badge */
    --badge-padding-x: var(--space-2);
    --badge-padding-y: var(--space-0-5);
    --badge-font-size: var(--text-xs);
    --badge-radius: var(--radius-full);
}


/* ============================================================
   DARK MODE
   ============================================================ */

[data-theme="dark"],
.dark {
    /* Semantic Color Aliases (Dark Mode) */
    --bg-primary:     var(--color-neutral-900);
    --bg-secondary:   var(--color-neutral-800);
    --bg-tertiary:    var(--color-neutral-700);
    --bg-inverse:     var(--color-neutral-0);
    --bg-brand:       var(--color-primary-500);
    --bg-brand-subtle: var(--color-primary-950);

    --text-primary:    var(--color-neutral-50);
    --text-secondary:  var(--color-neutral-300);
    --text-tertiary:   var(--color-neutral-400);
    --text-disabled:   var(--color-neutral-500);
    --text-inverse:    var(--color-neutral-900);
    --text-brand:      var(--color-primary-400);
    --text-link:       var(--color-primary-400);
    --text-link-hover: var(--color-primary-300);

    --border-default:  var(--color-neutral-700);
    --border-subtle:   var(--color-neutral-800);
    --border-strong:   var(--color-neutral-600);

    /* Adjusted shadows for dark mode */
    --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.6);
}


/* ============================================================
   SYSTEM PREFERENCE DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary:     var(--color-neutral-900);
        --bg-secondary:   var(--color-neutral-800);
        --bg-tertiary:    var(--color-neutral-700);
        --bg-inverse:     var(--color-neutral-0);
        --bg-brand:       var(--color-primary-500);
        --bg-brand-subtle: var(--color-primary-950);

        --text-primary:    var(--color-neutral-50);
        --text-secondary:  var(--color-neutral-300);
        --text-tertiary:   var(--color-neutral-400);
        --text-disabled:   var(--color-neutral-500);
        --text-inverse:    var(--color-neutral-900);
        --text-brand:      var(--color-primary-400);
        --text-link:       var(--color-primary-400);
        --text-link-hover: var(--color-primary-300);

        --border-default:  var(--color-neutral-700);
        --border-subtle:   var(--color-neutral-800);
        --border-strong:   var(--color-neutral-600);

        --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
        --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
        --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
        --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
        --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.6);
    }
}