/* =============================================================================
   VYONA Colour Palette — colorpalette.css
   All CSS custom properties (design tokens) for colours, spacing, typography, etc.
   Default palette: Corporate Professional.
   Switch palette by setting data-palette="corporate|modern-saas|dark-mode|minimalist"
   on the <html> element — no JavaScript required.
   Import this file first in site.css
   ============================================================================= */

:root {
  /* ── Colour Tokens (default: Corporate Professional) ───────────────────── */

  /* Brand & Semantic */
  --color-primary:          #0052CC;
  --color-primary-light:    #1A6BE0;   /* ~15% lighter — hover states          */
  --color-primary-dark:     #003D99;   /* ~15% darker  — active/pressed states */
  --color-primary-rgb:      0, 82, 204;/* bare R,G,B for rgba() usage           */

  --color-secondary:        #172B4D;
  --color-accent:           #00B8D9;
  --color-accent-rgb:       0, 184, 217;

  --color-success:          #36B37E;
  --color-success-rgb:      54, 179, 126;

  --color-warning:          #FFAB00;
  --color-warning-rgb:      255, 171, 0;

  --color-error:            #DE350B;   /* replaces --color-danger               */
  --color-error-rgb:        222, 53, 11;

  --color-info:             #0065FF;

  /* Surfaces & Structure */
  --color-background:       #FFFFFF;
  --color-surface:          #F4F5F7;
  --color-border:           #DFE1E6;
  --color-shadow:           rgba(0, 82, 204, 0.12);

  /* Typography */
  --color-text-primary:     #172B4D;
  --color-text-secondary:   #5E6C84;
  --color-text-disabled:    #A5ADBA;

  /* Semantic text colours for content on tinted backgrounds */
  --color-success-text:     #155724;
  --color-warning-text:     #664d03;
  --color-error-text:       #721c24;
  --color-accent-text:      #B07A00;

  /* ── Spacing Tokens ────────────────────────────────────────────────────── */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-xxl:  48px;

  /* ── Typography Tokens ─────────────────────────────────────────────────── */
  --font-family-base:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-sm:         12px;
  --font-size-base:       14px;
  --font-size-lg:         16px;
  --font-size-xl:         20px;
  --font-size-xxl:        24px;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:    1.25;
  --line-height-base:     1.5;
  --line-height-loose:    1.75;

  /* ── Border Radius Tokens ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadow Tokens ─────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px  var(--color-shadow);
  --shadow-sm:  0 2px 4px  var(--color-shadow);
  --shadow-md:  0 4px 12px var(--color-shadow);
  --shadow-lg:  0 8px 24px var(--color-shadow);
  --shadow-xl:  0 16px 40px var(--color-shadow);

  /* ── Transition Tokens ─────────────────────────────────────────────────── */
  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;

  /* ── Z-Index Tokens ────────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout Dimensions ─────────────────────────────────────────────────── */
  --sidebar-width:           240px;
  --sidebar-collapsed-width: 64px;
  --topbar-height:           60px;
}

/* =============================================================================
   PALETTE OVERRIDES
   Applied when <html data-palette="..."> is set server-side.
   Only colour tokens are overridden; all other tokens inherit from :root.
   ============================================================================= */

/* ── Palette: Corporate Professional ───────────────────────────────────────── */
html[data-palette="corporate"] {
  --color-primary:          #0052CC;
  --color-primary-light:    #1A6BE0;
  --color-primary-dark:     #003D99;
  --color-primary-rgb:      0, 82, 204;
  --color-secondary:        #172B4D;
  --color-accent:           #00B8D9;
  --color-success:          #36B37E;
  --color-success-rgb:      54, 179, 126;
  --color-warning:          #FFAB00;
  --color-warning-rgb:      255, 171, 0;
  --color-error:            #DE350B;
  --color-error-rgb:        222, 53, 11;
  --color-info:             #0065FF;
  --color-background:       #FFFFFF;
  --color-surface:          #F4F5F7;
  --color-border:           #DFE1E6;
  --color-shadow:           rgba(0, 82, 204, 0.12);
  --color-text-primary:     #172B4D;
  --color-text-secondary:   #5E6C84;
  --color-text-disabled:    #A5ADBA;
  --color-success-text:     #155724;
  --color-warning-text:     #664d03;
  --color-error-text:       #721c24;
  --color-accent-text:      #B07A00;
}

/* ── Palette: Modern SaaS ───────────────────────────────────────────────────── */
html[data-palette="modern-saas"] {
  --color-primary:          #6366F1;
  --color-primary-light:    #818CF8;
  --color-primary-dark:     #4F46E5;
  --color-primary-rgb:      99, 102, 241;
  --color-secondary:        #8B5CF6;
  --color-accent:           #EC4899;
  --color-success:          #10B981;
  --color-success-rgb:      16, 185, 129;
  --color-warning:          #F59E0B;
  --color-warning-rgb:      245, 158, 11;
  --color-error:            #EF4444;
  --color-error-rgb:        239, 68, 68;
  --color-info:             #3B82F6;
  --color-background:       #FFFFFF;
  --color-surface:          #F9FAFB;
  --color-border:           #E5E7EB;
  --color-shadow:           rgba(99, 102, 241, 0.12);
  --color-text-primary:     #111827;
  --color-text-secondary:   #6B7280;
  --color-text-disabled:    #D1D5DB;
  --color-success-text:     #064E3B;
  --color-warning-text:     #78350F;
  --color-error-text:       #7F1D1D;
  --color-accent-text:      #BE185D;
}

/* ── Palette: Dark Mode ─────────────────────────────────────────────────────── */
html[data-palette="dark-mode"] {
  --color-primary:          #3B82F6;
  --color-primary-light:    #60A5FA;
  --color-primary-dark:     #2563EB;
  --color-primary-rgb:      59, 130, 246;
  --color-secondary:        #8B5CF6;
  --color-accent:           #06B6D4;
  --color-success:          #10B981;
  --color-success-rgb:      16, 185, 129;
  --color-warning:          #F59E0B;
  --color-warning-rgb:      245, 158, 11;
  --color-error:            #EF4444;
  --color-error-rgb:        239, 68, 68;
  --color-info:             #0EA5E9;
  --color-background:       #0F172A;
  --color-surface:          #1E293B;
  --color-border:           #334155;
  --color-shadow:           rgba(0, 0, 0, 0.35);
  --color-text-primary:     #F1F5F9;
  --color-text-secondary:   #94A3B8;
  --color-text-disabled:    #64748B;
  --color-success-text:     #6EE7B7;
  --color-warning-text:     #FCD34D;
  --color-error-text:       #FCA5A5;
  --color-accent-text:      #67E8F9;
}

/* ── Palette: Minimalist Clean ──────────────────────────────────────────────── */
html[data-palette="minimalist"] {
  --color-primary:          #000000;
  --color-primary-light:    #404040;
  --color-primary-dark:     #000000;
  --color-primary-rgb:      0, 0, 0;
  --color-secondary:        #404040;
  --color-accent:           #2563EB;
  --color-success:          #059669;
  --color-success-rgb:      5, 150, 105;
  --color-warning:          #D97706;
  --color-warning-rgb:      217, 119, 6;
  --color-error:            #DC2626;
  --color-error-rgb:        220, 38, 38;
  --color-info:             #0284C7;
  --color-background:       #FFFFFF;
  --color-surface:          #FAFAFA;
  --color-border:           #E5E5E5;
  --color-shadow:           rgba(0, 0, 0, 0.08);
  --color-text-primary:     #171717;
  --color-text-secondary:   #737373;
  --color-text-disabled:    #A3A3A3;
  --color-success-text:     #064E3B;
  --color-warning-text:     #78350F;
  --color-error-text:       #7F1D1D;
  --color-accent-text:      #1D4ED8;
}