/**
 * Zaryon.pk — Design Tokens & Foundations
 * Brand Color Authority: #FF6A00 (Primary Accent), #111111 (Deep Near-Black), #F7F7F5 (Warm Canvas)
 */

:root {
  /* ── Core Brand Palette ── */
  --zyr-orange:           #FF6A00;
  --zyr-orange-hover:     #E65F00;
  --zyr-orange-active:    #CC5400;
  --zyr-orange-subtle:    rgba(255, 106, 0, 0.08);
  --zyr-orange-light:     rgba(255, 106, 0, 0.14);
  --zyr-orange-glow:      rgba(255, 106, 0, 0.28);

  --zyr-black:            #111111;
  --zyr-dark:             #18181B;
  --zyr-charcoal:         #27272A;
  --zyr-slate:            #3F3F46;

  --zyr-canvas:           #F7F7F5;
  --zyr-surface:          #FFFFFF;
  --zyr-surface-raised:   #FFFFFF;
  --zyr-surface-sunken:   #F1F1EE;

  /* ── Neutral Tones ── */
  --zyr-border-subtle:    #EEEEEC;
  --zyr-border:           #E4E4E0;
  --zyr-border-strong:    #D4D4CE;

  --zyr-text-primary:     #111111;
  --zyr-text-secondary:   #52524E;
  --zyr-text-muted:       #71717A;
  --zyr-text-inverse:     #FFFFFF;

  /* ── Functional / Status Tones ── */
  --zyr-success:          #16A34A;
  --zyr-success-subtle:   rgba(22, 163, 74, 0.1);
  --zyr-warning:          #D97706;
  --zyr-warning-subtle:   rgba(217, 119, 6, 0.1);
  --zyr-danger:           #DC2626;
  --zyr-danger-subtle:    rgba(220, 38, 38, 0.1);
  --zyr-info:             #2563EB;
  --zyr-info-subtle:      rgba(37, 99, 235, 0.1);

  /* ── Typography Stack ── */
  --zyr-font-heading:     'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --zyr-font-body:        'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --zyr-font-mono:        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Spatial Scale ── */
  --zyr-space-xs:         4px;
  --zyr-space-sm:         8px;
  --zyr-space-md:         16px;
  --zyr-space-lg:         24px;
  --zyr-space-xl:         32px;
  --zyr-space-2xl:        48px;
  --zyr-space-3xl:        64px;

  /* ── Corner Radii ── */
  --zyr-radius-xs:        4px;
  --zyr-radius-sm:        8px;
  --zyr-radius-md:        12px;
  --zyr-radius-lg:        16px;
  --zyr-radius-xl:        22px;
  --zyr-radius-full:      9999px;

  /* ── Elevations / Shadows ── */
  --zyr-shadow-xs:        0 1px 2px rgba(17, 17, 17, 0.04);
  --zyr-shadow-sm:        0 2px 6px rgba(17, 17, 17, 0.06);
  --zyr-shadow-md:        0 6px 16px rgba(17, 17, 17, 0.08);
  --zyr-shadow-lg:        0 12px 28px rgba(17, 17, 17, 0.12);
  --zyr-shadow-xl:        0 20px 40px rgba(17, 17, 17, 0.16);
  --zyr-shadow-orange:    0 8px 24px rgba(255, 106, 0, 0.25);

  /* ── Transitions & Motion ── */
  --zyr-ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --zyr-ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --zyr-duration-fast:    150ms;
  --zyr-duration-base:    250ms;
  --zyr-duration-slow:    350ms;

  /* ── Layout & Viewport ── */
  --zyr-container-max:    1280px;
  --zyr-header-height:    76px;
  --zyr-drawer-width:     440px;
}

/* ── Reduced Motion Support ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}