/**
 * Nucleora Design Tokens
 * ======================
 * A cohesive design system built for professional scientific software.
 * 
 * Color philosophy: Deep navy/slate backgrounds with teal/cyan accents.
 * Think Stripe/Linear — professional, clean, accessible.
 * 
 * These tokens extend the existing --n- system in app.css and provide
 * additional semantic aliases for new components.
 * 
 * Usage: Import this file BEFORE components.css and layout.css
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
     COLORS — Extended Palette
     Builds on --n-bg-*, --n-ink-*, --n-accent-* from app.css
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* --- Primary palette: Deep navy/slate --- */
  --color-primary-50: #f0f4f8;
  --color-primary-100: #d9e2ec;
  --color-primary-200: #bcccdc;
  --color-primary-300: #9fb3c8;
  --color-primary-400: #829ab1;
  --color-primary-500: #627d98;
  --color-primary-600: #486581;
  --color-primary-700: #334e68;
  --color-primary-800: #243b53;
  --color-primary-900: #102a43;
  
  /* --- Secondary: Teal/cyan accents --- */
  --color-secondary-50: #e0fcff;
  --color-secondary-100: #bef8fd;
  --color-secondary-200: #87eaf2;
  --color-secondary-300: #54d1db;
  --color-secondary-400: #38bec9;
  --color-secondary-500: #2cb1bc;
  --color-secondary-600: #14919b;
  --color-secondary-700: #0e7c86;
  --color-secondary-800: #0a6c74;
  --color-secondary-900: #044e54;
  
  /* --- Semantic color aliases (map to existing --n- vars where possible) --- */
  --color-primary: var(--n-accent, #17457c);
  --color-secondary: var(--color-secondary-600);
  --color-accent: var(--color-secondary-500);
  
  /* Status colors — aligned with existing --n-accent-2, --n-warn, --n-err */
  --color-success: var(--n-accent-2, #0b6b45);
  --color-success-light: #e6f4ed;
  --color-success-dark: #084d32;
  
  --color-warning: var(--n-warn, #7a5206);
  --color-warning-light: #fef6e6;
  --color-warning-dark: #5c3d04;
  
  --color-error: var(--n-err, #a91f16);
  --color-error-light: #fde8e7;
  --color-error-dark: #7d1710;
  
  --color-info: var(--n-info, #17457c);
  --color-info-light: #e8f0f8;
  --color-info-dark: #0f2f54;
  
  /* --- Background hierarchy (5 elevation steps) --- */
  --color-bg-base: var(--n-bg-0, #f2f4f6);
  --color-bg-surface: var(--n-bg-1, #ffffff);
  --color-bg-elevated: var(--n-bg-2, #ffffff);
  --color-bg-raised: var(--n-bg-3, #f1f3f5);
  --color-bg-overlay: var(--n-bg-4, #e4e8ec);
  --color-bg-inverse: var(--color-primary-900);
  
  /* --- Text colors --- */
  --color-text-primary: var(--n-ink-1, #13181d);
  --color-text-secondary: var(--n-ink-2, #4a535d);
  --color-text-tertiary: var(--n-ink-3, #6b747e);
  --color-text-disabled: #a9b1bb;
  --color-text-inverse: #ffffff;
  --color-text-on-primary: var(--n-on-accent, #ffffff);
  
  /* --- Border colors --- */
  --color-border-light: var(--n-line-1, #dce0e5);
  --color-border-default: var(--n-line-2, #c2c8cf);
  --color-border-strong: var(--n-line-3, #767f89);
  --color-border-focus: var(--n-focus-ring, #17457c);
  
  /* --- Interactive state colors --- */
  --color-hover-bg: rgba(23, 69, 124, 0.06);
  --color-active-bg: rgba(23, 69, 124, 0.10);
  --color-selected-bg: var(--n-accent-tint, #e9eef4);
  --color-selected-hover-bg: var(--n-accent-tint-2, #dae3ee);
  
  /* --- DNA/RNA base colors (semantic, functional) --- */
  --color-base-a: var(--n-base-a, #1f5fa9);
  --color-base-t: var(--n-base-t, #7a5206);
  --color-base-g: var(--n-base-g, #0b6b45);
  --color-base-c: var(--n-base-c, #0f6f80);
  --color-base-u: var(--n-base-u, #2f6f4f);
  
  /* ═══════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* --- Font families --- */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                      "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", 
                      "Segoe UI Emoji";
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, 
                      "Liberation Mono", monospace;
  --font-family-display: var(--font-family-sans);
  
  /* --- Font sizes (modular scale, base 14px, ratio 1.2) --- */
  --font-size-2xs: 0.65rem;   /* 9.1px  */
  --font-size-xs: 0.75rem;    /* 10.5px */
  --font-size-sm: 0.857rem;   /* 12px   */
  --font-size-base: 1rem;     /* 14px   */
  --font-size-md: 1.143rem;   /* 16px   */
  --font-size-lg: 1.286rem;   /* 18px   */
  --font-size-xl: 1.571rem;   /* 22px   */
  --font-size-2xl: 1.857rem;  /* 26px   */
  --font-size-3xl: 2.143rem;  /* 30px   */
  
  /* --- Font weights --- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* --- Line heights --- */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* --- Letter spacing --- */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-caps: 0.08em;
  
  /* ═══════════════════════════════════════════════════════════════════════
     SPACING (4px base scale)
     ═══════════════════════════════════════════════════════════════════════ */
  
  --space-px: 1px;
  --space-0: 0;
  --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 */
  
  /* ═══════════════════════════════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* --- Border widths --- */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  
  /* --- Border radii (tight scale per app.css design philosophy) --- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-full: 9999px;
  
  /* ═══════════════════════════════════════════════════════════════════════
     SHADOWS (tight offsets for genuinely-floating layers)
     Per app.css: cards get borders, not shadows. Shadows = floating only.
     ═══════════════════════════════════════════════════════════════════════ */
  
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(19, 24, 29, 0.04);
  --shadow-sm: var(--n-shadow-1, 0 1px 1px rgba(19, 24, 29, 0.06));
  --shadow-md: var(--n-shadow-2, 0 2px 4px rgba(19, 24, 29, 0.10));
  --shadow-lg: var(--n-shadow-3, 0 4px 10px rgba(19, 24, 29, 0.14));
  --shadow-xl: 0 8px 20px rgba(19, 24, 29, 0.18);
  --shadow-2xl: 0 16px 40px rgba(19, 24, 29, 0.22);
  
  /* Focus ring shadow (for keyboard navigation) */
  --shadow-focus: 0 0 0 2px var(--color-bg-surface), 
                  0 0 0 4px var(--color-border-focus);
  --shadow-focus-error: 0 0 0 2px var(--color-bg-surface), 
                        0 0 0 4px var(--color-error);
  
  /* Inset shadows for inputs */
  --shadow-inset-sm: inset 0 1px 2px rgba(19, 24, 29, 0.06);
  --shadow-inset-md: inset 0 2px 4px rgba(19, 24, 29, 0.08);
  
  /* ═══════════════════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* --- Durations --- */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-moderate: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  
  /* --- Easing functions --- */
  --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-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* --- Transition presets --- */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-moderate: var(--duration-moderate) var(--ease-in-out);
  --transition-slow: var(--duration-slow) var(--ease-in-out);
  
  /* Common transition properties */
  --transition-colors: color var(--transition-fast), 
                       background-color var(--transition-fast), 
                       border-color var(--transition-fast);
  --transition-opacity: opacity var(--transition-normal);
  --transition-transform: transform var(--transition-normal);
  --transition-all: all var(--transition-normal);
  
  /* ═══════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════════════════ */
  
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;
  
  /* ═══════════════════════════════════════════════════════════════════════
     COMPONENT-SPECIFIC TOKENS
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* --- Buttons --- */
  --btn-height-sm: 28px;
  --btn-height-md: 36px;
  --btn-height-lg: 44px;
  --btn-padding-x-sm: var(--space-2-5);
  --btn-padding-x-md: var(--space-3);
  --btn-padding-x-lg: var(--space-4);
  --btn-font-size-sm: var(--font-size-xs);
  --btn-font-size-md: var(--font-size-sm);
  --btn-font-size-lg: var(--font-size-base);
  --btn-border-radius: var(--radius-md);
  
  /* --- Inputs --- */
  --input-height-sm: 28px;
  --input-height-md: 36px;
  --input-height-lg: 44px;
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-border-radius: var(--radius-md);
  --input-border-width: var(--border-width-1);
  
  /* --- Cards --- */
  --card-padding: var(--space-4);
  --card-padding-sm: var(--space-3);
  --card-padding-lg: var(--space-6);
  --card-border-radius: var(--radius-lg);
  --card-border-width: var(--border-width-1);
  
  /* --- Modals --- */
  --modal-padding: var(--space-6);
  --modal-border-radius: var(--radius-xl);
  --modal-max-width-sm: 400px;
  --modal-max-width-md: 560px;
  --modal-max-width-lg: 720px;
  --modal-max-width-xl: 960px;
  
  /* --- Tables --- */
  --table-cell-padding-x: var(--space-3);
  --table-cell-padding-y: var(--space-2);
  --table-header-bg: var(--color-bg-raised);
  --table-stripe-bg: var(--color-bg-base);
  --table-hover-bg: var(--color-hover-bg);
  
  /* --- Tooltips --- */
  --tooltip-padding-x: var(--space-2);
  --tooltip-padding-y: var(--space-1);
  --tooltip-border-radius: var(--radius-sm);
  --tooltip-font-size: var(--font-size-xs);
  --tooltip-bg: var(--color-primary-900);
  --tooltip-color: var(--color-text-inverse);
  
  /* --- Badges --- */
  --badge-padding-x: var(--space-2);
  --badge-padding-y: var(--space-0-5);
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-medium);
  --badge-border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Mirrors existing [data-theme="dark"] behavior in app.css
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Background hierarchy inverted for dark mode */
  --color-bg-base: #101418;
  --color-bg-surface: #16191d;
  --color-bg-elevated: #1c2025;
  --color-bg-raised: #21262c;
  --color-bg-overlay: #2a3037;
  --color-bg-inverse: #f2f4f6;
  
  /* Text colors for dark backgrounds */
  --color-text-primary: #f2f4f6;
  --color-text-secondary: #a9b1bb;
  --color-text-tertiary: #818b95;
  --color-text-disabled: #5a636d;
  
  /* Border colors */
  --color-border-light: #2f353c;
  --color-border-default: #3c444c;
  --color-border-strong: #4a535d;
  
  /* Interactive states */
  --color-hover-bg: rgba(255, 255, 255, 0.06);
  --color-active-bg: rgba(255, 255, 255, 0.10);
  --color-selected-bg: rgba(23, 69, 124, 0.24);
  --color-selected-hover-bg: rgba(23, 69, 124, 0.32);
  
  /* Status colors — slightly brighter for dark backgrounds */
  --color-success-light: rgba(11, 107, 69, 0.18);
  --color-warning-light: rgba(122, 82, 6, 0.18);
  --color-error-light: rgba(169, 31, 22, 0.18);
  --color-info-light: rgba(23, 69, 124, 0.18);
  
  /* Shadows need higher opacity in dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.40);
  --shadow-2xl: 0 16px 40px rgba(0, 0, 0, 0.48);
  
  /* Tooltip styling */
  --tooltip-bg: var(--color-bg-overlay);
  --tooltip-color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Respect user preference for reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-moderate: 0ms;
    --transition-slow: 0ms;
    --transition-colors: none;
    --transition-opacity: none;
    --transition-transform: none;
    --transition-all: none;
  }
}