/* =========================================================================
   OSIM — Design Tokens
   Seven switchable presets, one shared type + spacing + motion system.
   Signature: the "chip" motif (a small cut-corner + contact-pad shape)
   and monospace OTP digits run through every surface, tying the whole
   theme back to a physical SIM card receiving a real SMS code.
   ========================================================================= */

:root,
[data-osim-theme="royal-blue"] {
  --color-primary: #1D4ED8;
  --color-primary-dark: #16309C;
  --color-accent: #22D3EE;
  --color-bg: #F6F8FC;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #0F1729;
  --color-text-muted: #5B6472;
  --color-border: #E3E8F0;
  --color-success: #16A34A;
  --color-on-primary: #FFFFFF;
  --shadow-elevation: 0 1px 2px rgba(15, 23, 41, .06), 0 12px 32px -16px rgba(15, 23, 41, .18);
}

[data-osim-theme="dark-purple"] {
  --color-primary: #6D28D9;
  --color-primary-dark: #4C1D95;
  --color-accent: #C084FC;
  --color-bg: #F8F6FC;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #1B1230;
  --color-text-muted: #5F5670;
  --color-border: #E7E1F2;
  --color-success: #16A34A;
  --color-on-primary: #FFFFFF;
  --shadow-elevation: 0 1px 2px rgba(27, 18, 48, .06), 0 12px 32px -16px rgba(76, 29, 149, .22);
}

[data-osim-theme="emerald-green"] {
  --color-primary: #059669;
  --color-primary-dark: #047857;
  --color-accent: #34D399;
  --color-bg: #F5FAF8;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #0E1F1A;
  --color-text-muted: #56685F;
  --color-border: #DFEEE7;
  --color-success: #16A34A;
  --color-on-primary: #FFFFFF;
  --shadow-elevation: 0 1px 2px rgba(14, 31, 26, .06), 0 12px 32px -16px rgba(5, 150, 105, .2);
}

[data-osim-theme="orange"] {
  --color-primary: #EA580C;
  --color-primary-dark: #B9440A;
  --color-accent: #FDBA74;
  --color-bg: #FBF7F3;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #241408;
  --color-text-muted: #6B5B4C;
  --color-border: #F0E2D3;
  --color-success: #16A34A;
  --color-on-primary: #FFFFFF;
  --shadow-elevation: 0 1px 2px rgba(36, 20, 8, .06), 0 12px 32px -16px rgba(234, 88, 12, .22);
}

[data-osim-theme="black-gold"] {
  --color-primary: #D4AF37;
  --color-primary-dark: #B4922B;
  --color-accent: #F1D889;
  --color-bg: #0B0B0C;
  --color-surface: #151517;
  --color-surface-raised: #1B1B1E;
  --color-text: #F4EFE1;
  --color-text-muted: #A8A297;
  --color-border: #2B2A26;
  --color-success: #34D399;
  --color-on-primary: #0B0B0C;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -18px rgba(212, 175, 55, .25);
}

[data-osim-theme="minimal-white"] {
  --color-primary: #0F172A;
  --color-primary-dark: #000000;
  --color-accent: #64748B;
  --color-bg: #FFFFFF;
  --color-surface: #FAFAFA;
  --color-surface-raised: #FFFFFF;
  --color-text: #0F172A;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;
  --color-success: #16A34A;
  --color-on-primary: #FFFFFF;
  --shadow-elevation: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -18px rgba(15, 23, 42, .16);
}

[data-osim-theme="dark-mode"] {
  --color-primary: #3B82F6;
  --color-primary-dark: #2563EB;
  --color-accent: #22D3EE;
  --color-bg: #0A0E17;
  --color-surface: #121826;
  --color-surface-raised: #171F30;
  --color-text: #E7ECF5;
  --color-text-muted: #93A0B8;
  --color-border: #232C40;
  --color-success: #34D399;
  --color-on-primary: #FFFFFF;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -18px rgba(59, 130, 246, .28);
}

:root {
  /* Type */
  --font-display: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-heading: 700;

  --step--1: clamp(.83rem, .8rem + .1vw, .9rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.6vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.6vw, 3.6rem);
  --step-5: clamp(2.45rem, 1.9rem + 2.8vw, 4rem);

  /* Space */
  --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-2xs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-5);
  --space-lg: var(--space-6);
  --space-xl: var(--space-10);
  --space-2xl: var(--space-16);
  --osim-hero-y: clamp(38px, 4vw, 58px);
  --osim-section-y: clamp(40px, 4vw, 58px);
  --osim-section-compact-y: clamp(24px, 3vw, 40px);
  --osim-section-tight-y: clamp(24px, 3vw, 40px);
  --osim-section-head-gap: var(--space-5);
  --osim-logo-height: 32px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1160px;

  --ease-signal: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur-med: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}