/*
 * Design tokens — Material You (MD3), Bravo red seed (#C62828).
 * RULE: never hardcode a color anywhere else. Always use var(--token).
 */
:root {
  /* === Primary — Bravo Crimson Red === */
  --primary-color:          #C62828;
  --primary-dark:           #8E0000;
  --primary-container:      #FFDAD6;
  --on-primary:             #FFFFFF;
  --on-primary-container:   #410002;

  /* === Secondary — Brand Navy === */
  --secondary-color:        #1e293b;
  --secondary-container:    #E2E8F0;
  --on-secondary:           #FFFFFF;
  --on-secondary-container: #0f172a;

  /* === Tertiary — Warm Amber accent === */
  --tertiary-container:     #FFDEA8;
  --on-tertiary-container:  #2C1A00;

  /* === Surface system (warm red tint) === */
  --bg-color:               #FFFBFF;
  --surface-container:      #FAF0EF;
  --surface-container-low:  #F0E4E3;
  --surface:                #FAF0EF;   /* = --surface-container, alias used in admin templates */
  --surface-variant:        #F0E4E3;   /* = --surface-container-low, alias used in signup stepper */
  --card-bg:                #FAF0EF;   /* = --surface-container, alias used in proforma template */

  /* === Text === */
  --text-color:             #1C1B1F;
  --text-muted:             #534341;
  /* Semantic aliases — use these in templates for readability */
  --text-primary:           #1C1B1F;   /* = --text-color */
  --text-secondary:         #534341;   /* = --text-muted */

  /* === Border === */
  --border-color:           #857370;

  /* === Status === */
  --success-color:          #2E7D32;
  --success-container:      #C8E6C9;
  --on-success-container:   #1B5E20;
  --success-light:          #D1FAE5;   /* light green tint — 2FA enabled badge bg */
  --success-dark:           #065F46;   /* dark green — 2FA enabled badge text */
  --warning-color:          #F57C00;
  --warning-container:      #FFE0B2;
  --on-warning-container:   #BF360C;
  --warning-accent:         #E65100;   /* urgent warning — expiring documents, overdue */
  --danger-color:           #B71C1C;
  --error-color:            #B71C1C;   /* = --danger-color, alias for form field errors */

  /* === Skeleton (warm tints) === */
  --skeleton-base:          #F0E4E3;
  --skeleton-shimmer:       #FAF0EF;

  /* === Spacing === */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;
  --spacing-2xl:  48px;
  --spacing-3xl:  64px;

  /* === Border radius — MD3 scale === */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   28px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  /* === Typography === */
  --font-family:    'Manrope', sans-serif;
  --font-size-2xs:  10px;
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  48px;

  /* === Elevation shadows (warm crimson tint) === */
  --shadow-sm: 0 1px 3px rgba(66,0,0,0.07), 0 1px 2px rgba(66,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(66,0,0,0.09), 0 2px 4px rgba(66,0,0,0.05);
  --shadow-lg: 0 8px 24px rgba(66,0,0,0.11), 0 4px 8px rgba(66,0,0,0.06);
  --shadow-xl: 0 16px 40px rgba(66,0,0,0.14), 0 8px 16px rgba(66,0,0,0.08);

  /* === Animation === */
  --ease-md3:        cubic-bezier(0.2, 0, 0, 1);
  --transition-instant: 150ms;
  --transition-fast:    200ms;
  --transition-std:     300ms;
  --transition-slow:    500ms;

  /* === Glass overlays (frosted light surface) === */
  --overlay-glass:     rgba(255,251,255,0.85);
  --overlay-loader:    rgba(255,251,255,0.88);
  --overlay-backdrop:  rgba(0,0,0,0.45);      /* modal / toast backdrop */
  --overlay-lightbox:  rgba(0,0,0,0.92);      /* full-screen lightbox */
  --overlay-dark-soft: rgba(0,0,0,0.70);      /* crop modal backdrop */
  --surface-dark:      #1a1a1a;               /* dark crop/preview surface */
  --glass-dark-sm:     rgba(255,255,255,0.15);
  --glass-dark-md:     rgba(255,255,255,0.30);
  --glass-dark-border: rgba(255,255,255,0.25);

  /* === Layout constants === */
  --header-height:      72px;
  --container-max-width: 1200px;

  /* === Z-index scale === */
  --z-base:          1;
  --z-above:         2;
  --z-scroll-btn:    10;
  --z-search:        50;
  --z-header:        100;
  --z-admin-overlay: 150;
  --z-admin-sidebar: 200;
  --z-dropdown:      400;
  --z-float:         999;
  --z-overlay:       9999;

  /* === Text on dark surface (footer / sidebar) === */
  --text-on-dark:     rgba(255,255,255,0.7);
  --text-on-dark-dim: rgba(255,255,255,0.4);
  --dot-inactive:     rgba(255,255,255,0.55);

  /* === Sidebar === */
  --sidebar-text:    rgba(255,255,255,0.65);
  --sidebar-divider: rgba(255,255,255,0.08);
  --sidebar-label:   var(--primary-container);

  /* === Social brand colors === */
  --color-whatsapp:      #25d366;
  --color-facebook:        #1877f2;
  --color-instagram:       linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --color-twitter:       #000000;
  --color-linkedin:      #0a66c2;
  --color-youtube:       #ff0000;
}