/* ============================================
   TEYMENSEL WHITEBOARD — CSS DESIGN TOKENS
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --tw-brand-primary: #6C5CE7;
  --tw-brand-primary-light: #A29BFE;
  --tw-brand-primary-dark: #4834D4;
  --tw-brand-accent: #00CEFF;
  --tw-brand-accent-light: #74E8FF;

  /* ── Dark Theme (Default) ── */
  --tw-bg-app: #1A1A2E;
  --tw-bg-surface: #16213E;
  --tw-bg-elevated: #1E2A47;
  --tw-bg-canvas: #252525;
  --tw-bg-canvas-alt: #1E1E1E;
  --tw-bg-toolbar: rgba(30, 42, 71, 0.92);
  --tw-bg-toolbar-blur: blur(20px);
  --tw-bg-modal: rgba(22, 33, 62, 0.96);
  --tw-bg-hover: rgba(108, 92, 231, 0.12);
  --tw-bg-active: rgba(108, 92, 231, 0.20);
  --tw-bg-input: rgba(255, 255, 255, 0.06);
  --tw-bg-dropdown: #1E2A47;

  /* ── Text Colors ── */
  --tw-text-primary: #F0F0F5;
  --tw-text-secondary: #A0A0BC;
  --tw-text-tertiary: #6B6B8A;
  --tw-text-inverse: #1A1A2E;
  --tw-text-link: #74E8FF;
  --tw-text-danger: #FF6B6B;
  --tw-text-success: #51CF66;
  --tw-text-warning: #FFD43B;

  /* ── Border Colors ── */
  --tw-border-subtle: rgba(255, 255, 255, 0.08);
  --tw-border-default: rgba(255, 255, 255, 0.14);
  --tw-border-strong: rgba(255, 255, 255, 0.22);
  --tw-border-focus: var(--tw-brand-primary);
  --tw-border-danger: #FF6B6B;

  /* ── Shadows ── */
  --tw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --tw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --tw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --tw-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --tw-shadow-glow: 0 0 20px rgba(108, 92, 231, 0.3);
  --tw-shadow-toolbar: 0 -4px 24px rgba(0, 0, 0, 0.4);

  /* ── Sticky Note Colors ── */
  --tw-note-yellow: #FFF9C4;
  --tw-note-yellow-dark: #F9E547;
  --tw-note-green: #C8E6C9;
  --tw-note-green-dark: #66BB6A;
  --tw-note-blue: #BBDEFB;
  --tw-note-blue-dark: #42A5F5;
  --tw-note-pink: #F8BBD0;
  --tw-note-pink-dark: #EC407A;
  --tw-note-purple: #D1C4E9;
  --tw-note-purple-dark: #AB47BC;
  --tw-note-gray: #CFD8DC;
  --tw-note-gray-dark: #78909C;

  /* ── Pen Default Colors ── */
  --tw-pen-black: #333333;
  --tw-pen-red: #E53935;
  --tw-pen-green: #43A047;
  --tw-pen-yellow: #FDD835;
  --tw-pen-blue: #1E88E5;
  --tw-pen-purple: #8E24AA;

  /* ── Canvas Background Presets ── */
  --tw-canvas-dark: #252525;
  --tw-canvas-darker: #1E1E1E;
  --tw-canvas-white: #FFFFFF;
  --tw-canvas-light-gray: #F5F5F5;
  --tw-canvas-warm-beige: #FFF8E7;
  --tw-canvas-light-blue: #E8F4FD;

  /* ── Grid Colors ── */
  --tw-grid-line: rgba(255, 255, 255, 0.06);
  --tw-grid-dot: rgba(255, 255, 255, 0.12);

  /* ── Typography ── */
  --tw-font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --tw-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --tw-font-size-xs: 0.6875rem;    /* 11px */
  --tw-font-size-sm: 0.75rem;      /* 12px */
  --tw-font-size-base: 0.875rem;   /* 14px */
  --tw-font-size-md: 1rem;         /* 16px */
  --tw-font-size-lg: 1.125rem;     /* 18px */
  --tw-font-size-xl: 1.25rem;      /* 20px */
  --tw-font-size-2xl: 1.5rem;      /* 24px */
  --tw-font-size-3xl: 2rem;        /* 32px */
  --tw-font-size-4xl: 2.5rem;      /* 40px */

  --tw-font-weight-normal: 400;
  --tw-font-weight-medium: 500;
  --tw-font-weight-semibold: 600;
  --tw-font-weight-bold: 700;

  --tw-line-height-tight: 1.2;
  --tw-line-height-normal: 1.5;
  --tw-line-height-relaxed: 1.75;

  /* ── Spacing ── */
  --tw-space-1: 4px;
  --tw-space-2: 8px;
  --tw-space-3: 12px;
  --tw-space-4: 16px;
  --tw-space-5: 20px;
  --tw-space-6: 24px;
  --tw-space-8: 32px;
  --tw-space-10: 40px;
  --tw-space-12: 48px;
  --tw-space-16: 64px;

  /* ── Border Radius ── */
  --tw-radius-sm: 4px;
  --tw-radius-md: 8px;
  --tw-radius-lg: 12px;
  --tw-radius-xl: 16px;
  --tw-radius-2xl: 24px;
  --tw-radius-full: 9999px;

  /* ── Transitions ── */
  --tw-transition-fast: 120ms ease;
  --tw-transition-normal: 200ms ease;
  --tw-transition-slow: 350ms ease;
  --tw-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Layers ── */
  --tw-z-canvas: 1;
  --tw-z-objects: 10;
  --tw-z-selection: 20;
  --tw-z-toolbar: 100;
  --tw-z-header: 110;
  --tw-z-panel: 200;
  --tw-z-dropdown: 300;
  --tw-z-modal: 400;
  --tw-z-toast: 500;
  --tw-z-tooltip: 600;

  /* ── Layout ── */
  --tw-header-height: 48px;
  --tw-toolbar-height: 48px;
  --tw-sidebar-width: 280px;
}

/* ── Light Theme Override ── */
[data-theme="light"] {
  --tw-bg-app: #F8F9FA;
  --tw-bg-surface: #FFFFFF;
  --tw-bg-elevated: #FFFFFF;
  --tw-bg-canvas: #FFFFFF;
  --tw-bg-canvas-alt: #F5F5F5;
  --tw-bg-toolbar: rgba(255, 255, 255, 0.92);
  --tw-bg-modal: rgba(255, 255, 255, 0.96);
  --tw-bg-hover: rgba(108, 92, 231, 0.08);
  --tw-bg-active: rgba(108, 92, 231, 0.14);
  --tw-bg-input: rgba(0, 0, 0, 0.04);
  --tw-bg-dropdown: #FFFFFF;

  --tw-text-primary: #1A1A2E;
  --tw-text-secondary: #5A5A7A;
  --tw-text-tertiary: #9090AA;
  --tw-text-inverse: #F0F0F5;

  --tw-border-subtle: rgba(0, 0, 0, 0.06);
  --tw-border-default: rgba(0, 0, 0, 0.12);
  --tw-border-strong: rgba(0, 0, 0, 0.20);

  --tw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --tw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --tw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --tw-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.20);
  --tw-shadow-toolbar: 0 -4px 24px rgba(0, 0, 0, 0.12);

  --tw-grid-line: rgba(0, 0, 0, 0.06);
  --tw-grid-dot: rgba(0, 0, 0, 0.14);
}