/* ============================================================
   Design Tokens — CSS Custom Properties
   Single source of truth for the entire design system.

   Sections:
     1. Brand Palette
     2. Bootstrap Semantic Colors
     3. RGB Channels
     4. Neutral Scale
     5. Typography
     6. Border System
     7. Links
     8. Auth Page Tokens
     9. Semantic Colors
    10. Soft Color System
    11. Sidebar
    12. Focus & Gradients
    13. Shadows & Elevation
    14. Glass & Skeleton
    15. Motion System
    16. Dark Mode Tokens
   ============================================================ */


/* ── 1. Brand Palette ─────────────────────────────────────── */
:root {
    --color-brand-50:  #ECF6FB;
    --color-brand-100: #DFEBF2;
    --color-brand-200: #B3D7EA;
    --color-brand-300: #7ABDD8;
    --color-brand-400: #3AA0C6;
    --color-brand-500: #0069A6;
    --color-brand-600: #005A8F;
    --color-brand-700: #004B77;
    --color-brand-800: #003B5E;
    --color-brand-900: #002D46;
}


/* ── 2. Bootstrap Semantic Colors ─────────────────────────── */
:root {
    --bs-primary:   #0069A6;
    --bs-secondary: #71869d;
    --bs-success:   #00c9a7;
    --bs-info:      #09a5be;
    --bs-warning:   #FF8956;
    --bs-danger:    #ed4c78;
    --bs-light:     #F5F5F5;
    --bs-dark:      #002D46;
}


/* ── 3. RGB Channels (for rgba() usage) ───────────────────── */
:root {
    --bs-primary-rgb:   0, 105, 166;
    --bs-secondary-rgb: 113, 134, 157;
    --bs-success-rgb:   0, 201, 167;
    --bs-info-rgb:      9, 165, 190;
    --bs-warning-rgb:   255, 137, 86;
    --bs-danger-rgb:    237, 76, 120;
    --bs-light-rgb:     245, 245, 245;
    --bs-dark-rgb:      22, 55, 96;
    --bs-white-rgb:     255, 255, 255;
    --bs-black-rgb:     0, 0, 0;
    --bs-body-color-rgb: 76, 76, 76;
}


/* ── 4. Neutral Scale ─────────────────────────────────────── */
:root {
    --bs-gray:      #8c98a4;
    --bs-gray-dark: #71869d;
    --bs-gray-50:   #fbfcfe;
    --bs-gray-100:  #f9fafc;
    --bs-gray-200:  #f1f4f8;
    --bs-gray-300:  #e7eaf3;
    --bs-gray-400:  #bdc5d1;
    --bs-gray-500:  #97a4af;
    --bs-gray-600:  #8c98a4;
    --bs-gray-700:  #677788;
    --bs-gray-800:  #71869d;
    --bs-gray-900:  #1e2022;
}


/* ── 5. Typography ────────────────────────────────────────── */
:root {
    --bs-body-font-family:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-font-monospace:      "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --bs-body-font-size:      0.875rem;
    --bs-body-font-weight:    400;
    --bs-body-line-height:    1.5;
    --bs-body-color:          #4c4c4c;
    --bs-body-bg:             #F5F5F5;
    --bs-heading-color:       #002D46;
    --bs-heading-weight:      650;
}


/* ── 6. Border System ─────────────────────────────────────── */
:root {
    --bs-border-width:   0.0625rem;
    --bs-border-style:   solid;
    --bs-border-color:   rgba(0, 0, 0, 0.08);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.06);
    --bs-border-radius:     0.5rem;
    --bs-border-radius-sm:  0.3125rem;
    --bs-border-radius-lg:  0.75rem;
    --bs-border-radius-xl:  1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
}


/* ── 7. Links ─────────────────────────────────────────────── */
:root {
    --bs-link-color:       #0069A6;
    --bs-link-hover-color: #004B77;
    --bs-code-color:       #d63384;
    --bs-highlight-bg:     #fdf4eb;
}


/* ── 8. Auth Page Tokens ──────────────────────────────────── */
:root {
    /* Colors */
    --auth-primary:            #0069A6;
    --auth-primary-dark:       #005A8F;
    --auth-primary-light:      rgba(0, 105, 166, 0.12);
    --auth-link-color:         #0069A6;
    --auth-link-hover:         #005A8F;
    --auth-focus-ring:         rgba(0, 105, 166, 0.2);
    --auth-surface:            #ffffff;
    --auth-bg-panel:           var(--auth-primary);
    --auth-text-on-dark:       rgba(255, 255, 255, 0.9);
    --auth-text-on-dark-muted: rgba(255, 255, 255, 0.65);
    --auth-border:             #e5e7eb;
    --auth-input-bg:           #f9fafb;
    --auth-label-color:        #374151;
    --auth-placeholder:        #9ca3af;
    --auth-error-color:        #dc2626;
    --auth-success-color:      #059669;

    /* Spacing */
    --auth-form-gap:   1.25rem;
    --auth-panel-pad:  clamp(2rem, 5vw, 3.5rem);

    /* Radius */
    --auth-radius-sm:   6px;
    --auth-radius:      10px;
    --auth-radius-lg:   16px;
    --auth-radius-xl:   24px;
    --auth-radius-full: 9999px;

    /* Motion */
    --auth-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --auth-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --auth-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --auth-dur-fast:    100ms;
    --auth-dur-base:    180ms;
    --auth-dur-slow:    280ms;
    --auth-dur-slower:  400ms;

    /* Shadows */
    --auth-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --auth-shadow:       0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --auth-shadow-md:    0 10px 20px -3px rgba(0, 0, 0, 0.1), 0 4px 8px -4px rgba(0, 0, 0, 0.06);
    --auth-shadow-logo:  0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    --auth-shadow-input: 0 1px 2px rgba(0, 0, 0, 0.04);
}


/* ── 9. Semantic Colors (App-Level) ───────────────────────── */
:root {
    --text-sub:         #71869d;
    --text-heading:     var(--bs-heading-color);
    --color-success:    #00c9a7;
    --color-info:       #09a5be;
    --color-warning:    #E0702E;
    --color-danger:     #ed4c78;
}


/* ── 10. Soft Color System ────────────────────────────────── */
:root {
    --soft-primary-bg:       rgba(0, 105, 166, 0.08);
    --soft-primary-bg-hover: rgba(0, 105, 166, 0.15);
    --soft-primary-border:   rgba(0, 105, 166, 0.2);
    --soft-success-bg:       rgba(0, 201, 167, 0.08);
    --soft-success-bg-hover: rgba(0, 201, 167, 0.15);
    --soft-success-border:   rgba(0, 201, 167, 0.15);
    --soft-info-bg:          rgba(9, 165, 190, 0.08);
    --soft-info-bg-hover:    rgba(9, 165, 190, 0.15);
    --soft-info-border:      rgba(9, 165, 190, 0.15);
    --soft-warning-bg:       rgba(224, 112, 46, 0.08);
    --soft-warning-bg-hover: rgba(224, 112, 46, 0.15);
    --soft-warning-border:   rgba(224, 112, 46, 0.15);
    --soft-danger-bg:        rgba(237, 76, 120, 0.08);
    --soft-danger-bg-hover:  rgba(237, 76, 120, 0.15);
    --soft-danger-border:    rgba(237, 76, 120, 0.15);
    --soft-secondary-bg:     rgba(113, 134, 157, 0.1);
    --soft-secondary-bg-hover: rgba(113, 134, 157, 0.18);
    --soft-secondary-border: rgba(113, 134, 157, 0.15);
}


/* ── 11. Sidebar ──────────────────────────────────────────── */
:root {
    --sidebar-gradient: linear-gradient(135deg, #0a4f7a 0%, #0a4f7a 50%, #062a47 100%);
    --sidebar-bg-dark: #062a47;
    --sidebar-width: 256px;
}


/* ── 12. Focus & Gradients ────────────────────────────────── */
:root {
    --focus-ring: 0 0 0 3px rgba(10, 79, 122, 0.18);
    --brand-gradient:        linear-gradient(135deg, #0a4f7a 0%, #0a4f7a 50%, #062a47 100%);
    --brand-gradient-hover:  linear-gradient(135deg, #0c5e8e 0%, #0a4f7a 50%, #073d61 100%);
    --brand-gradient-active: linear-gradient(135deg, #073d61 0%, #062a47 50%, #03192c 100%);
    --brand-solid:           #0a4f7a;
    --brand-solid-deep:      #062a47;
    --brand-soft:            rgba(10, 79, 122, 0.10);
    --brand-soft-strong:     rgba(10, 79, 122, 0.18);
    --brand-soft-border:     rgba(10, 79, 122, 0.28);
    --brand-shadow:          0 6px 16px -8px rgba(6, 42, 71, 0.55);
    --gradient-primary:       var(--brand-gradient);
    --gradient-primary-hover: var(--brand-gradient-hover);
    --border-light: rgba(231, 234, 243, 0.7);
}


/* ── 13. Shadows & Elevation ──────────────────────────────── */
:root {
    /* App-level */
    --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-dropdown:  0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sidebar:   3px 0 13px 1px rgba(215, 215, 215, 0.35);

    /* Elevation scale */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}


/* ── 14. Glass & Skeleton ─────────────────────────────────── */
:root {
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: 16px;
    --skeleton-base: #e7eaf3;
    --skeleton-shine: #f1f4f8;
}


/* ── 15. Motion System ────────────────────────────────────── */
:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-instant: 100ms;
    --dur-fast: 150ms;
    --dur-normal: 250ms;
    --dur-slow: 350ms;
    --dur-slower: 500ms;
}


/* ── 16. Dark Mode Tokens ─────────────────────────────────── */
:root {
    --dark-bg-body: #0f1117;
    --dark-bg-surface: #1a1d27;
    --dark-bg-elevated: #222633;
    --dark-bg-overlay: #2a2e3d;
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-border-subtle: rgba(255, 255, 255, 0.04);
    --dark-text-primary: #f0f2f5;
    --dark-text-secondary: #9ba3b5;
    --dark-text-muted: #6b7280;
    --dark-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --dark-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}