/* Design Tokens — Component Library
   Author: Nikba Creative Studio
   Indigo + teal accent (single site palette) */

:root {
  --color-primary:         #312E81;
  --color-primary-dark:    #1E1B6E;
  --color-primary-light:   #4338CA;
  --color-primary-subtle:  #EEECFB;
  --color-secondary:       #11181C;
  --color-secondary-light: #2C353D;
  --color-accent:          #0D9488;
  --color-accent-dark:     #0A7A71;
  --color-accent-light:    #CCFBF1;
  --color-success:         #16a34a;
  --color-error:           #DC2626;
  --color-neutral-0:       #FFFFFF;
  --color-neutral-50:      #F8FAFC;
  --color-neutral-100:     #F1F5F9;
  --color-neutral-200:     #E2E8F0;
  --color-neutral-300:     #CBD5E1;
  --color-neutral-400:     #94A3B8;
  --color-neutral-500:     #64748B;
  --color-neutral-600:     #475569;
  --color-text-primary:    #11181C;
  --color-text-secondary:  #475569;
  --color-text-disabled:   #94A3B8;
  /* Form field leading icons (SVG currentColor + tinted <img> repo icons) */
  --form-input-icon-color: var(--color-neutral-400);
  --color-text-inverse:    #FFFFFF;
  --color-border:          #E2E8F0;
  --color-border-strong:   #CBD5E1;
  --color-surface:         #FFFFFF;
  --color-bg:              #F8FAFC;

  /* Hero / dark panels (gradients, overlays) */
  --color-hero-darkest:    #0D0B2E;
  --color-hero-deep:       #1A176B;
  --color-hero-card:       #1E1B6E;
  --color-card-mid:        #3730A3;
  --color-card-light:      #4338CA;
  --color-primary-rgb:     49, 46, 129;
  --color-hero-darkest-rgb: 13, 11, 46;
  --color-primary-dark-rgb: 30, 27, 110;
  --color-hero-deep-rgb:   26, 23, 107;
  --color-hero-card-rgb:   30, 27, 110;
  --color-card-mid-rgb:    55, 48, 163;

  /* Light section backgrounds (v-subtle, CTA shell, etc.) */
  --color-subtle-1:        #f0f0ff;
  --color-subtle-2:        #ecebfe;
  --color-subtle-3:        #f4f4fc;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px; --space-11: 80px; --space-12: 96px;

  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.18);
  --shadow-form: 0 20px 60px rgba(30,27,110,.22);
  --shadow-focus: 0 0 0 3px rgba(49,46,129,.15);
  --shadow-focus-error: 0 0 0 3px rgba(220,38,38,.12);
  --shadow-focus-success: 0 0 0 3px rgba(22,163,74,.12);

  --font: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --tr: .24s cubic-bezier(.4,0,.2,1);
}