/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                    OCEAN MODERN DESIGN SYSTEM                              ║
 * ║                         CSS Design Tokens v1.0                             ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 *
 * A calming, professional design language inspired by coastal waters.
 * Built for Dolphin AI with accessibility and scalability at its core.
 *
 * Usage:
 *   @import url('tokens.css');
 *
 * Architecture:
 *   TIER 1: Primitives    → Raw values (never reference directly in components)
 *   TIER 2: Semantic      → Purpose-driven tokens (use in component CSS)
 *   TIER 3: Component     → Specific component tokens (optional)
 *
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 1: PRIMITIVE TOKENS
     Raw design values. Reference these in Tier 2, not directly in components.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Ocean Palette
     Derived from deep ocean to shallow coastal waters
     ───────────────────────────────────────────────────────────────────────── */
  --color-ocean-900: #0c4a6e;   /* Deep ocean - darkest brand */
  --color-ocean-800: #0369a1;   /* Mid ocean - secondary brand */
  --color-ocean-700: #0284c7;   /* Ocean blue */
  --color-ocean-600: #0ea5e9;   /* Light ocean */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Teal Palette (Brand Core)
     The primary brand expression - balance of blue and green
     ───────────────────────────────────────────────────────────────────────── */
  --color-teal-700: #2d6b6c;    /* Dark teal */
  --color-teal-600: #4a9d9e;    /* PRIMARY BRAND COLOR */
  --color-teal-500: #67b8b8;    /* Light teal */
  --color-teal-400: #81d4d4;    /* Lighter teal */
  --color-teal-300: #99e6e6;    /* Lightest teal */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Aqua (Accent)
     High-energy accent for highlights and interactive states
     ───────────────────────────────────────────────────────────────────────── */
  --color-aqua-500: #22d3d3;    /* PRIMARY ACCENT */
  --color-aqua-400: #5eead4;    /* Light aqua */
  --color-aqua-300: #99f6e4;    /* Lightest aqua */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Neutrals (Slate)
     Cool-toned grays for text and UI chrome
     ───────────────────────────────────────────────────────────────────────── */
  --color-slate-900: #0f172a;   /* Primary text */
  --color-slate-800: #1e293b;   /* Headings */
  --color-slate-700: #334155;   /* Strong secondary */
  --color-slate-600: #475569;   /* Secondary text */
  --color-slate-500: #64748b;   /* Muted text */
  --color-slate-400: #94a3b8;   /* Placeholder */
  --color-slate-300: #cbd5e1;   /* Borders */
  --color-slate-200: #e2e8f0;   /* Dividers */
  --color-slate-100: #f1f5f9;   /* Background subtle */
  --color-slate-50: #f8fafc;    /* Background lightest */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Natural Tones
     Warm accents derived from beach and sand
     ───────────────────────────────────────────────────────────────────────── */
  --color-foam: #f0fdfa;        /* Sea foam - tinted white */
  --color-sand: #fefce8;        /* Beach sand - warm white */
  --color-white: #ffffff;       /* Pure white */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Feedback
     Status colors for validation and alerts
     ───────────────────────────────────────────────────────────────────────── */
  --color-coral-600: #ef4444;   /* Error - strong */
  --color-coral-500: #f87171;   /* Error - default */
  --color-coral-100: #fee2e2;   /* Error - background */

  --color-emerald-600: #059669; /* Success - strong */
  --color-emerald-500: #10b981; /* Success - default */
  --color-emerald-100: #d1fae5; /* Success - background */

  --color-amber-600: #d97706;   /* Warning - strong */
  --color-amber-500: #f59e0b;   /* Warning - default */
  --color-amber-100: #fef3c7;   /* Warning - background */

  /* ─────────────────────────────────────────────────────────────────────────
     Spacing Scale
     4px base unit, following a consistent progression
     ───────────────────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px - Minimum spacing */
  --space-2: 0.5rem;      /* 8px - Tight spacing */
  --space-3: 0.75rem;     /* 12px - Small spacing */
  --space-4: 1rem;        /* 16px - Default spacing */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px - Content spacing */
  --space-8: 2rem;        /* 32px - Section spacing */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px - Card padding */
  --space-16: 4rem;       /* 64px - Section padding */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px - Hero padding */

  /* ─────────────────────────────────────────────────────────────────────────
     Typography Scale
     Based on 1.25 (Major Third) ratio
     ───────────────────────────────────────────────────────────────────────── */
  --text-xs: 0.75rem;     /* 12px - Badges, metadata */
  --text-sm: 0.8125rem;   /* 13px - Labels, captions */
  --text-base: 0.9375rem; /* 15px - Body text */
  --text-lg: 1.0625rem;   /* 17px - Lead text */
  --text-xl: 1.5rem;      /* 24px - Card headings */
  --text-2xl: 1.75rem;    /* 28px - Section headings */
  --text-3xl: 2.25rem;    /* 36px - Page titles */
  --text-4xl: 3rem;       /* 48px - Display headings */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* 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;

  /* ─────────────────────────────────────────────────────────────────────────
     Border Radius
     Rounded corners following an 8px base
     ───────────────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 8px;       /* Buttons, inputs */
  --radius-md: 12px;      /* Cards, dropdowns */
  --radius-lg: 16px;      /* Modal, larger cards */
  --radius-xl: 20px;      /* Badges */
  --radius-2xl: 24px;     /* Hero cards */
  --radius-full: 9999px;  /* Avatars, pills */

  /* ─────────────────────────────────────────────────────────────────────────
     Shadows
     Layered shadows for depth without harshness
     ───────────────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --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.15);

  /* Ocean Modern signature shadows */
  --shadow-glow: 0 8px 32px rgba(74, 157, 158, 0.3);
  --shadow-glow-lg: 0 12px 40px rgba(74, 157, 158, 0.4);
  --shadow-card:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 15px -3px rgba(0, 0, 0, 0.05),
    0 20px 40px rgba(74, 157, 158, 0.1);

  /* ─────────────────────────────────────────────────────────────────────────
     Transitions
     Smooth, water-like motion
     ───────────────────────────────────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);    /* Standard easing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* Accelerate */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* Decelerate */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* Both */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */

  /* ─────────────────────────────────────────────────────────────────────────
     Z-Index Scale
     Layering system for overlapping elements
     ───────────────────────────────────────────────────────────────────────── */
  --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;


  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 2: SEMANTIC TOKENS
     Purpose-driven tokens. Use these in your component CSS.
     Change these to theme the system without touching component code.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────────────────
     Brand Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-brand-primary: var(--color-teal-600);
  --color-brand-primary-hover: var(--color-teal-500);
  --color-brand-primary-active: var(--color-teal-700);
  --color-brand-secondary: var(--color-ocean-800);
  --color-brand-accent: var(--color-aqua-500);

  /* ─────────────────────────────────────────────────────────────────────────
     Text Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-text-primary: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-muted: var(--color-slate-400);
  --color-text-disabled: var(--color-slate-300);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-teal-600);
  --color-text-link-hover: var(--color-teal-500);

  /* ─────────────────────────────────────────────────────────────────────────
     Background Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-foam);
  --color-bg-tertiary: var(--color-sand);
  --color-bg-muted: var(--color-slate-50);
  --color-bg-elevated: rgba(255, 255, 255, 0.9);
  --color-bg-overlay: rgba(15, 23, 42, 0.5);
  --color-bg-interactive: rgba(74, 157, 158, 0.1);
  --color-bg-interactive-hover: rgba(74, 157, 158, 0.15);

  /* ─────────────────────────────────────────────────────────────────────────
     Border Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-border-default: var(--color-slate-300);
  --color-border-muted: var(--color-slate-200);
  --color-border-focus: var(--color-teal-600);
  --color-border-error: var(--color-coral-500);
  --color-border-success: var(--color-emerald-500);

  /* ─────────────────────────────────────────────────────────────────────────
     Interactive States
     ───────────────────────────────────────────────────────────────────────── */
  --color-interactive-primary: var(--color-teal-600);
  --color-interactive-primary-hover: var(--color-teal-500);
  --color-interactive-primary-active: var(--color-teal-700);
  --color-interactive-secondary: var(--color-ocean-800);

  /* ─────────────────────────────────────────────────────────────────────────
     Status Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-success: var(--color-emerald-500);
  --color-success-bg: var(--color-emerald-100);
  --color-warning: var(--color-amber-500);
  --color-warning-bg: var(--color-amber-100);
  --color-error: var(--color-coral-600);
  --color-error-bg: var(--color-coral-100);

  /* ─────────────────────────────────────────────────────────────────────────
     Focus Ring
     Visible focus indicator for accessibility
     ───────────────────────────────────────────────────────────────────────── */
  --focus-ring-color: rgba(74, 157, 158, 0.2);
  --focus-ring-width: 4px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);


  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 3: COMPONENT TOKENS
     Specific component values. Optional - can use Tier 2 directly.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────────────────
     Button
     ───────────────────────────────────────────────────────────────────────── */
  --btn-padding-y: var(--space-4);
  --btn-padding-x: var(--space-8);
  --btn-padding-y-sm: var(--space-2);
  --btn-padding-x-sm: var(--space-4);
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--text-base);
  --btn-font-weight: var(--font-semibold);
  --btn-transition: all var(--duration-normal) var(--ease-default);

  /* ─────────────────────────────────────────────────────────────────────────
     Input
     ───────────────────────────────────────────────────────────────────────── */
  --input-padding-y: 14px;
  --input-padding-x: 18px;
  --input-radius: var(--radius-md);
  --input-border-width: 2px;
  --input-font-size: var(--text-base);
  --input-bg: var(--color-white);
  --input-border: var(--color-border-default);
  --input-placeholder: var(--color-text-muted);

  /* ─────────────────────────────────────────────────────────────────────────
     Card
     ───────────────────────────────────────────────────────────────────────── */
  --card-padding: var(--space-12);
  --card-padding-sm: var(--space-6);
  --card-radius: var(--radius-2xl);
  --card-bg: var(--color-bg-elevated);
  --card-border: rgba(74, 157, 158, 0.1);
  --card-shadow: var(--shadow-card);

  /* ─────────────────────────────────────────────────────────────────────────
     Badge
     ───────────────────────────────────────────────────────────────────────── */
  --badge-padding-y: 6px;
  --badge-padding-x: 14px;
  --badge-radius: var(--radius-xl);
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--font-semibold);
  --badge-letter-spacing: 1px;

  /* ─────────────────────────────────────────────────────────────────────────
     Progress Dot
     ───────────────────────────────────────────────────────────────────────── */
  --progress-dot-size: 12px;
  --progress-dot-gap: var(--space-2);
  --progress-dot-color: var(--color-border-default);
  --progress-dot-active-color: var(--color-brand-primary);
  --progress-dot-active-ring: 0 0 0 4px rgba(74, 157, 158, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENTS
   Ocean Modern signature gradient definitions
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Primary button gradient */
  --gradient-primary: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-ocean-800) 100%);

  /* Active toggle gradient */
  --gradient-toggle: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-teal-500) 100%);

  /* Accent/Icon gradient */
  --gradient-accent: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-aqua-500) 100%);

  /* Text gradient (for headings) */
  --gradient-text: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-ocean-900) 100%);
  --gradient-text-brand: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-ocean-900) 100%);

  /* Background selections */
  --gradient-selection: linear-gradient(135deg, rgba(74, 157, 158, 0.1) 0%, rgba(34, 211, 211, 0.1) 100%);

  /* Page background */
  --gradient-page: linear-gradient(180deg, var(--color-foam) 0%, var(--color-white) 50%, var(--color-sand) 100%);
}