/* ==========================================================================
   ZolnaPay — Microsoft Fluent 2 Design System Tokens
   Tokens accurately conform to Fluent 2 Design Guidelines:
   https://fluent2.microsoft.design/
   ========================================================================== */

:root {
  /* ==========================================
     1. Brand Color Ramp (ZolnaPay Blue)
     ========================================== */
  --brand-10: #061727;
  --brand-20: #0b2742;
  --brand-30: #0f385e;
  --brand-40: #12497a;
  --brand-50: #145b98;
  --brand-60: #166db5;
  --brand-70: #1880d4; /* ZolnaPay Primary */
  --brand-80: #3391dc;
  --brand-90: #54a3e3;
  --brand-100: #77b6ea;
  --brand-110: #9ac9f1;
  --brand-120: #bddbf7;
  --brand-130: #deedfc;
  --brand-140: #edf5fd;
  --brand-150: #f5f9fe;
  --brand-160: #fafcff;

  /* ==========================================
     2. Spatial System (Fluent 2 Scale)
     ========================================== */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;
  --spacing-7xl: 80px;

  /* ==========================================
     3. Corner Radii (Fluent 2 Standard)
     ========================================== */
  --radius-none: 0px;
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 8px;
  --radius-xl: 12px;
  --radius-xxl: 16px;
  --radius-circle: 9999px;

  /* ==========================================
     4. Typography Scale & Fonts
     ========================================== */
  --font-base: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Cairo', 'Roboto', sans-serif;
  --font-display: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Cairo', 'Outfit', sans-serif;
  --font-mono: 'Consolas', 'Cascadia Code', 'JetBrains Mono', monospace;

  --font-size-caption2: 10px;
  --line-height-caption2: 14px;
  --font-size-caption1: 12px;
  --line-height-caption1: 16px;
  --font-size-body1: 14px;
  --line-height-body1: 20px;
  --font-size-body2: 16px;
  --line-height-body2: 24px;
  --font-size-subtitle2: 16px;
  --line-height-subtitle2: 22px;
  --font-size-subtitle1: 20px;
  --line-height-subtitle1: 26px;
  --font-size-title3: 24px;
  --line-height-title3: 32px;
  --font-size-title2: 28px;
  --line-height-title2: 36px;
  --font-size-title1: 32px;
  --line-height-title1: 40px;
  --font-size-large-title: 40px;
  --line-height-large-title: 48px;
  --font-size-display: 52px;
  --line-height-display: 60px;

  /* ==========================================
     5. Motion Curves & Durations (Fluent 2)
     ========================================== */
  --curve-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1);
  --curve-accelerate: cubic-bezier(0.9, 0.1, 1, 0.2);
  --curve-standard: cubic-bezier(0.33, 0, 0.67, 1);
  --duration-ultra-fast: 50ms;
  --duration-faster: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-gentle: 250ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;

  /* ==========================================
     6. Layout Bounds
     ========================================== */
  --max-content-width: 1200px;
  --header-height: 60px;
}

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */
:root, [data-theme="light"] {
  --color-neutral-bg-1: #ffffff;
  --color-neutral-bg-2: #fcfcfc;
  --color-neutral-bg-3: #f5f5f5;
  --color-neutral-bg-4: #f0f0f0;
  --color-neutral-bg-5: #ebebeb;
  --color-neutral-bg-6: #e6e6e6;
  --color-neutral-bg-card: #ffffff;
  --color-neutral-bg-card-hover: #fafafa;
  --color-neutral-bg-subtle-hover: #f0f0f0;
  --color-neutral-bg-subtle-pressed: #e6e6e6;

  --color-surface-acrylic: rgba(255, 255, 255, 0.85);
  --color-surface-mica: #f8fafc;
  --color-surface-subtle: #f3f6f9;

  --color-neutral-fg-1: #242424; /* Primary high contrast */
  --color-neutral-fg-2: #424242; /* Secondary */
  --color-neutral-fg-3: #616161; /* Tertiary meta */
  --color-neutral-fg-4: #757575; /* Subdued */
  --color-neutral-fg-disabled: #bdbdbd;

  --color-brand-bg: var(--brand-70);
  --color-brand-bg-hover: var(--brand-60);
  --color-brand-bg-pressed: var(--brand-50);
  --color-brand-bg-subtle: var(--brand-140);
  --color-brand-fg: var(--brand-60);
  --color-brand-fg-on-brand: #ffffff;
  --color-brand-fg-2: var(--brand-40);

  --color-neutral-stroke-1: #e0e0e0;
  --color-neutral-stroke-2: #ededed;
  --color-neutral-stroke-subtle: #f0f0f0;
  --color-neutral-stroke-1-hover: #c7c7c7;
  --color-neutral-stroke-1-pressed: #adadad;
  --color-brand-stroke: var(--brand-70);
  --color-brand-stroke-subtle: var(--brand-120);

  /* Elevation Shadows */
  --shadow-2: 0 0 2px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 0 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-8: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-16: 0 0 2px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-28: 0 0 8px rgba(0, 0, 0, 0.06), 0 14px 28px rgba(0, 0, 0, 0.08);
  --shadow-64: 0 0 8px rgba(0, 0, 0, 0.06), 0 32px 64px rgba(0, 0, 0, 0.12);

  /* Semantic Feedback */
  --color-success-bg: #dff6dd;
  --color-success-fg: #107c41;
  --color-success-stroke: #92c353;
  --color-warning-bg: #fff4ce;
  --color-warning-fg: #795e00;
  --color-warning-stroke: #fce100;
  --color-error-bg: #fde7e9;
  --color-error-fg: #c42b1c;
  --color-error-stroke: #f1707b;
  --color-info-bg: #edf5fd;
  --color-info-fg: var(--brand-60);
  --color-info-stroke: var(--brand-100);

  /* Terminal Code Block */
  --color-code-bg: #111827;
  --color-code-fg: #f3f4f6;
  --color-code-stroke: #1f2937;
  --color-code-header-bg: #1f2937;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
[data-theme="dark"] {
  --color-neutral-bg-1: #1a1a1a;
  --color-neutral-bg-2: #141414;
  --color-neutral-bg-3: #242424;
  --color-neutral-bg-4: #2e2e2e;
  --color-neutral-bg-5: #383838;
  --color-neutral-bg-6: #424242;
  --color-neutral-bg-card: #202020;
  --color-neutral-bg-card-hover: #282828;
  --color-neutral-bg-subtle-hover: #292929;
  --color-neutral-bg-subtle-pressed: #333333;

  --color-surface-acrylic: rgba(26, 26, 26, 0.85);
  --color-surface-mica: #161a1f;
  --color-surface-subtle: #1f242b;

  --color-neutral-fg-1: #ffffff;
  --color-neutral-fg-2: #d6d6d6;
  --color-neutral-fg-3: #a6a6a6;
  --color-neutral-fg-4: #858585;
  --color-neutral-fg-disabled: #5c5c5c;

  --color-brand-bg: var(--brand-70);
  --color-brand-bg-hover: var(--brand-80);
  --color-brand-bg-pressed: var(--brand-60);
  --color-brand-bg-subtle: rgba(24, 128, 212, 0.15);
  --color-brand-fg: var(--brand-90);
  --color-brand-fg-on-brand: #ffffff;
  --color-brand-fg-2: var(--brand-100);

  --color-neutral-stroke-1: #333333;
  --color-neutral-stroke-2: #2b2b2b;
  --color-neutral-stroke-subtle: #242424;
  --color-neutral-stroke-1-hover: #4d4d4d;
  --color-neutral-stroke-1-pressed: #666666;
  --color-brand-stroke: var(--brand-80);
  --color-brand-stroke-subtle: rgba(24, 128, 212, 0.3);

  /* Elevation Shadows in Dark Theme */
  --shadow-2: 0 0 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-4: 0 0 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-8: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-16: 0 0 2px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.45);
  --shadow-28: 0 0 8px rgba(0, 0, 0, 0.4), 0 14px 28px rgba(0, 0, 0, 0.5);
  --shadow-64: 0 0 8px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.6);

  /* Semantic Feedback */
  --color-success-bg: rgba(16, 124, 65, 0.2);
  --color-success-fg: #54b054;
  --color-success-stroke: rgba(84, 176, 84, 0.4);
  --color-warning-bg: rgba(121, 94, 0, 0.25);
  --color-warning-fg: #fce100;
  --color-warning-stroke: rgba(252, 225, 0, 0.4);
  --color-error-bg: rgba(196, 43, 28, 0.25);
  --color-error-fg: #f1707b;
  --color-error-stroke: rgba(241, 112, 123, 0.4);
  --color-info-bg: rgba(24, 128, 212, 0.2);
  --color-info-fg: var(--brand-90);
  --color-info-stroke: var(--brand-70);

  /* Terminal Code Block */
  --color-code-bg: #0d1117;
  --color-code-fg: #e6edf3;
  --color-code-stroke: #21262d;
  --color-code-header-bg: #161b22;
}