/* ==========================================================================
   BespokeLMS Marketing Site — Design Tokens
   All CSS custom properties live here. Never hardcode values elsewhere.
   ========================================================================== */

:root {

  /* ── Colour: Brand ──────────────────────────────────────────────────── */
  --color-navy: #0F2B4C;
  --color-teal: #1FB8CD;

  /* ── Colour: Ink & Surface (Salix palette) ──────────────────────────── */
  --color-ink: #181818;
  /* near-black for headings */
  --color-surface: #FFFFFF;
  /* white page background */
  --color-surface-2: #F4F4F5;
  /* light grey — card borders, dividers */

  /* ── Colour: Secondary ──────────────────────────────────────────────── */
  --color-slate: #3B526F;
  --color-mist: #E8F0F7;
  --color-cloud: #F5F8FC;
  --color-white: #FFFFFF;

  /* ── Colour: Feedback ───────────────────────────────────────────────── */
  --color-success: #1A7A4A;
  --color-warning: #B86800;
  --color-error: #B91C1C;

  /* ── Colour: Tints (for backgrounds, cards) ─────────────────────────  */
  --color-navy-5: rgba(15, 43, 76, 0.05);
  --color-navy-10: rgba(15, 43, 76, 0.10);
  --color-teal-10: rgba(31, 184, 205, 0.10);
  --color-teal-20: rgba(31, 184, 205, 0.20);

  /* ── Colour: Bento accents ──────────────────────────────────────────── */
  --color-bento-red: #E84C6B;
  --color-bento-blue: #4A6EE8;
  --color-bento-dark: #191C2A;

  /* ── C-3: Semantic role tokens (light defaults) ───────────────────────── */
  /* Surfaces */
  --surface-primary: var(--color-white);
  --surface-secondary: var(--color-surface-2);
  --surface-elevated: var(--color-white);
  --surface-inverse: var(--color-ink);

  /* Text */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-slate);
  --text-muted: #64748b;
  --text-inverse: var(--color-white);
  --text-link: var(--color-teal);
  --text-link-hover: var(--color-slate);

  /* Borders */
  --border-default: #e5e7eb;
  --border-subtle: var(--color-surface-2);
  --border-focus: var(--color-teal);

  /* Accent */
  --accent-primary: var(--color-teal);
  --accent-primary-hover: var(--color-slate);
  --accent-primary-text: var(--color-white);

  /* Feedback */
  --feedback-error: var(--color-error);
  --feedback-success: var(--color-success);
  --feedback-warning: var(--color-warning);

  /* Miscellaneous Contextual */
  --color-nav-bg: rgba(250, 250, 250, 0.97);
  --color-badge-bg: rgba(0, 0, 0, 0.05);
  --color-step-bg: #f5f5f5;
  --color-step-text: var(--color-slate);
  --color-bg-overlay-default: rgba(15, 43, 76, 0.4);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-family-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-family-body-display: var(--font-family-body-heading);
  /* alias — use for large display text */
  --font-family-body-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --font-size-4xl: 4rem;
  /* 64px — hero headlines */
  --font-size-3xl: 2.5rem;
  /* 40px — page titles */
  --font-size-2xl: 2.75rem;
  /* 44px — section headings (Salix match) */
  --font-size-xl: 1.5rem;
  /* 24px — sub-section headings */
  --font-size-lg: 1.25rem;
  /* 20px — card titles */
  --font-size-lg: 1.125rem;
  /* 18px — lead paragraph */
  --font-size-md: 1rem;
  /* 16px — body */
  --font-size-sm: 0.875rem;
  /* 14px — captions, footnotes */
  --font-size-xs: 0.75rem;
  /* 12px — tags, UI labels */
  --font-size-xs: 0.6875rem;
  /* 11px — microcopy */

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

  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.75;

  /* ── Letter Spacing ─────────────────────────────────────────────────── */
  --letter-spacing-tighter: -0.04em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* ── Spacing (4px base unit) ────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Border Radius ──────────────────────────────────────────────────── */
  --radius-sm: 4px;
  /* tags, badges */
  --radius-base: 8px;
  /* inputs */
  --radius-lg: 12px;
  /* cards */
  --radius-xl: 20px;
  /* feature blocks */
  --radius-2xl: 28px;
  /* large panels */
  --radius-full: 100px;
  /* pill buttons & badges */

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.05);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.16);
  --shadow-inner: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 2px var(--color-teal);
  --shadow-focus-subtle: 0 0 0 3px var(--color-teal-10);
  --shadow-card-dark: 0 8px 28px rgba(0, 0, 0, 0.45);

  /* ── Opacity ────────────────────────────────────────────────────────── */
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;

  /* ── Transitions ────────────────────────────────────────────────────── */
  /* Timing and Physics Primitives */
  --duration-100: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-400: 400ms;
  --duration-500: 500ms;
  --duration-700: 700ms;

  --ease-linear: linear;
  --ease-in-out: ease-in-out;
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  
  --transition-fast: var(--duration-fast) ease;
  --transition-base: var(--duration-base) ease;
  --transition-slow: var(--duration-slow) ease;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --layout-sm: 560px;
  --layout-md: 720px;
  --layout-lg: 900px;
  --max-width-site: 1200px;
  --max-width-prose: 680px;
  --gutter: var(--space-6);

  /* ── Z-Index ──────────────────────────────────────────────────────────── */
  --z-index-behind: -1;
  --z-index-base: 1;
  --z-index-raised: 10;
  --z-index-sticky: 100;
  --z-index-dropdown: 200;
  --z-index-overlay: 500;
  --z-index-modal: 9000;
  --z-index-toast: 9999;

  /* ── Borders & Outlines ─────────────────────────────────────────────── */
  --border-width-base: 1px;
  --border-width-md: 1.5px;
  --border-width-lg: 2px;
  --border-width-xl: 3px;
  --border-width-2xl: 4px;
  --outline-width: 2px;

  /* ── Component Tokens: Buttons ───────────────────────────────────────── */
  
  /* Primary Button (Dark/Ink) */
  --btn-primary-bg:           var(--surface-inverse);
  --btn-primary-bg-hovered:   #2a2a2a;
  --btn-primary-bg-pressed:   #111111;
  --btn-primary-text:                 var(--color-white);
  --btn-primary-text-disabled:        var(--color-state-disabledForeground);
  --button-primary-border:               var(--surface-inverse);
  --button-primary-border-hovered:       #2a2a2a;
  --button-primary-border-focused:       var(--border-focus);
  --button-primary-icon:                 currentColor;
  --button-primary-padding-inline:       var(--space-6);
  --button-primary-padding-block:        11px;
  --button-primary-radius:               var(--radius-full);
  --button-primary-shadow:               0 4px 0 0 rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  --button-primary-shadow-hovered:       0 0 0 0 rgba(0, 0, 0, 0.35);
  --button-primary-shadow-pressed:       0 0 0 0 rgba(0, 0, 0, 0.3);

  /* Secondary Button (Outlined/White) */
  --btn-secondary-bg:         var(--surface-primary);
  --btn-secondary-bg-hovered: #F4F4F5;
  --btn-secondary-bg-pressed: #EBEBEC;
  --btn-secondary-text:               var(--text-primary);
  --btn-secondary-text-disabled:      var(--color-state-disabledForeground);
  --btn-secondary-border:             #DDDDE0;
  --btn-secondary-border-hovered:     var(--border-default);
  --btn-secondary-border-focused:     var(--border-focus);
  --button-secondary-icon:               currentColor;
  --button-secondary-padding-inline:     var(--space-6);
  --button-secondary-padding-block:      11px;
  --button-secondary-radius:             var(--radius-full);
  --button-secondary-shadow:             0 4px 0 0 rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
  --button-secondary-shadow-hovered:     0 0 0 0 rgba(0, 0, 0, 0.18);
  --button-secondary-shadow-pressed:     0 0 0 0 rgba(0, 0, 0, 0.15);

  /* Tertiary Button (Ghost/Transparent) */
  --button-tertiary-background:          transparent;
  --button-tertiary-background-hovered:  var(--surface-secondary);
  --button-tertiary-background-pressed:  var(--surface-secondary);
  --button-tertiary-text:                var(--text-primary);
  --button-tertiary-text-disabled:       var(--color-state-disabledForeground);
  --button-tertiary-border:              var(--border-default);
  --button-tertiary-border-hovered:      var(--border-default);
  --button-tertiary-border-focused:      var(--border-focus);
  --button-tertiary-icon:                currentColor;
  --button-tertiary-padding-inline:      var(--space-6);
  --button-tertiary-padding-block:       11px;
  --button-tertiary-radius:              var(--radius-full);
  --button-tertiary-shadow:              0 4px 0 0 rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.10);
  --button-tertiary-shadow-hovered:      0 0 0 0 rgba(0, 0, 0, 0.20);
  --button-tertiary-shadow-pressed:      0 0 0 0 rgba(0, 0, 0, 0.15);

  /* Danger Button */
  --button-danger-background:            var(--feedback-error);
  --button-danger-background-hovered:    #9f1818;
  --button-danger-background-pressed:    #861414;
  --button-danger-text:                  var(--color-white);
  --button-danger-text-disabled:         var(--color-state-disabledForeground);
  --button-danger-border:                var(--feedback-error);
  --button-danger-border-hovered:        #9f1818;
  --button-danger-border-focused:        var(--border-focus);
  --button-danger-icon:                  currentColor;
  --button-danger-padding-inline:        var(--space-6);
  --button-danger-padding-block:         11px;
  --button-danger-radius:                var(--radius-full);
  --button-danger-shadow:                0 4px 16px rgba(185, 28, 28, 0.30);
  --button-danger-shadow-hovered:        0 4px 0 0 rgba(185, 28, 28, 0.30);
  --button-danger-shadow-pressed:        0 0 0 0 rgba(0, 0, 0, 0.1);

  /* Brand/Teal Button Extrapolation */
  --button-brand-background:             var(--accent-primary);
  --button-brand-background-hovered:     #1CA4B7;
  --button-brand-background-pressed:     #1890A0;
  --button-brand-text:                   var(--color-white);
  --button-brand-border:                 var(--accent-primary);
  --button-brand-border-hovered:         #1CA4B7;
  --button-brand-shadow:                 0 4px 20px rgba(31, 184, 205, 0.32);
  --button-brand-shadow-hovered:         0 0 0 0 rgba(31, 184, 205, 0.32);
  --button-brand-shadow-pressed:         0 0 0 0 rgba(31, 184, 205, 0.32);

  /* Additional Universal Button Metrics */
  --button-base-font-weight:             var(--font-weight-semibold);
  --button-base-letter-spacing:          -0.01em;
  --button-base-transition:              background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease, opacity 150ms ease;
  --button-base-border-width:            1.5px;

  /* Button Size Mods */
  --button-sm-padding-inline: 16px;
  --button-sm-padding-block: 7px;
  --button-sm-font: 0.8125rem;
  --button-md-font: 0.9375rem;
  --button-lg-padding-inline: 32px;
  --button-lg-padding-block: 14px;
  --button-lg-font: 1rem;
  --button-xl-padding-inline: 40px;
  --button-xl-padding-block: 17px;
  --button-xl-font: 1.0625rem;

  /* ──── COMPONENT: Inputs ──── */
  --input-background-default:            var(--surface-primary);
  --input-background-disabled:           var(--surface-secondary);
  
  --input-border-default:                var(--border-subtle);
  --input-border-hovered:                var(--border-default);
  --input-border-focused:                var(--border-focus);
  --input-border-error:                  var(--feedback-error);

  --input-text-value:                    var(--text-primary);
  --input-text-placeholder:              var(--text-secondary);
  --input-text-disabled:                 var(--color-state-disabledForeground);

  --input-label-text:                    var(--text-primary);
  --input-label-requiredIndicator:       var(--feedback-error);

  --input-helper-text:                   var(--text-secondary);
  --input-helper-icon:                   var(--text-secondary);

  --input-radius:                        var(--radius-lg);
  --input-padding-inline:                var(--space-4);
  --input-padding-block:                 var(--space-3);

  /* ──── COMPONENT: Cards ──── */
  --card-background:           var(--surface-primary);
  --card-border:               var(--border-subtle);
  --card-radius:               var(--radius-xl);
  --card-shadow:               var(--shadow-card);
  
  --card-padding-inline:       var(--space-8);
  --card-padding-block:        var(--space-8);

  --card-header-background:    transparent;
  --card-header-text:          var(--text-primary);
  
  --card-footer-background:    var(--surface-secondary);
  --card-footer-text:          var(--text-secondary);

  /* ──── COMPONENT: Navigation ──── */
  
  /* Sidebar */
  --nav-sidebar-background:            var(--surface-inverse);
  --nav-sidebar-background-activeItem: var(--surface-primary);
  --nav-sidebar-item-text:             var(--text-primary);
  --nav-sidebar-item-text-active:      var(--text-link);
  --nav-sidebar-item-text-muted:       var(--text-secondary);
  --nav-sidebar-item-icon:             var(--text-secondary);
  --nav-sidebar-item-icon-active:      var(--text-link);

  /* Topbar */
  --nav-topbar-background:             var(--surface-primary);
  --nav-topbar-text:                   var(--text-primary);
  --nav-topbar-text-muted:             var(--text-secondary);
  --nav-topbar-icon:                   var(--text-secondary);

  /* Mega Menu Defaults */
  --nav-mega-min-height:               460px;

  /* ──── COMPONENT: Chips & Badges ──── */
  --chip-background:            var(--surface-primary);
  --chip-background-selected:   var(--surface-inverse);
  --chip-text:                  var(--text-primary);
  --chip-text-selected:         var(--text-inverse);
  --chip-icon:                  var(--text-secondary);
  --chip-border:                var(--border-subtle);
  --chip-radius:                var(--radius-full);
  --chip-padding-inline:        var(--space-4);
  --chip-padding-block:         var(--space-2);

  /* ──── COMPONENT: Toasts & Alerts ──── */
  --toast-background-info:      var(--surface-primary);
  --toast-background-success:   var(--surface-primary);
  --toast-background-warning:   var(--surface-primary);
  --toast-background-danger:    var(--surface-primary);
  --toast-border-info:          var(--border-focus);
  --toast-border-success:       var(--feedback-success);
  --toast-border-warning:       var(--feedback-warning);
  --toast-border-danger:        var(--feedback-error);
  --toast-icon-info:            var(--text-link);
  --toast-icon-success:         var(--color-text-success);
  --toast-icon-warning:         var(--color-text-warning);
  --toast-icon-danger:          var(--feedback-error);
  --toast-text-title:           var(--text-primary);
  --toast-text-body:            var(--text-secondary);
  --toast-radius:               var(--radius-md); 
  --toast-padding-inline:       var(--space-4);
  --toast-padding-block:        var(--space-3);

  /* ──── COMPONENT: Modals & Dialogs ──── */
  --modal-background:            var(--surface-primary);
  --modal-border:                var(--border-subtle);
  --modal-radius:                var(--radius-xl);
  --modal-shadow:                var(--shadow-2xl);
  --modal-header-background:     transparent;
  --modal-header-text:           var(--text-primary);
  --modal-body-padding:          var(--space-6);
  --modal-footer-background:     var(--surface-secondary);
  --modal-footer-padding:        var(--space-4) var(--space-6);

  /* ── Footer — fixed dark, immune to section alternation ─────────────────── */
  --color-footer-bg:         #050505;
  --color-footer-text:       #A8AABB;
  --color-footer-text-dim:   #5C5F70;
  --color-footer-heading:    #E0E0E6;
  --color-footer-link:       #C0C2CC;
  --color-footer-link-hover: #F0F0F2;
  --color-footer-border:     rgba(255, 255, 255, 0.08);

}

/* ── Dark mode: manual toggle ────────────────────────────────────────────── */
/* Applied via JS when user clicks the nav toggle (stored in localStorage).  */
[data-theme="dark"] {
  /* Surfaces */
  --surface-primary: #161b22; 
  --surface-secondary: #1c2128; 
  --surface-elevated: #21262d;
  --surface-inverse: #050505;

  /* Text */
  --text-primary: #f0f6fc;      
  --text-secondary: #9ca3af;    
  --text-muted: #94a3b8;               
  --text-inverse: #181818; 
  
  /* Borders */
  --border-subtle: #21262d;
  --border-default: #30363d;
  --border-focus: var(--color-teal);
  
  /* Buttons */
  --btn-primary-bg: #f0f6fc;
  --btn-primary-text: #0f1117;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #f0f6fc;
  --btn-secondary-border: #30363d;
  
  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);

  /* Navigation */
  --color-nav-bg: rgba(22, 27, 34, 0.97);
}

/* ── Dark mode: OS preference ────────────────────────────────────────────── */
/* Mirrors [data-theme="dark"] — user's OS setting when no manual override.  */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Surfaces */
    --surface-primary: #161b22; 
    --surface-secondary: #1c2128; 
    --surface-elevated: #21262d;
    --surface-inverse: #050505;

    /* Text */
    --text-primary: #f0f6fc;      
    --text-secondary: #9ca3af;    
    --text-muted: #8b949e;               
    --text-inverse: #181818; 
    
    /* Borders */
    --border-subtle: #21262d;
    --border-default: #30363d;
    --border-focus: var(--color-teal);
    
    /* Buttons */
    --btn-primary-bg: #f0f6fc;
    --btn-primary-text: #0f1117;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #f0f6fc;
    --btn-secondary-border: #30363d;
    
    /* Shadows */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);

    /* Navigation */
    --color-nav-bg: rgba(22, 27, 34, 0.97);
  }
}