/**
 * Petriz Design System — tokens
 *
 * Loaded before style.css. Only custom properties live here; no selectors
 * that paint. Legacy --pc-* names are kept as aliases so the existing
 * stylesheet keeps working while sections are migrated one by one.
 */

:root {
  /* ---------------------------------------------------------------
   * Brand palette — deep navy + muted gold
   * ------------------------------------------------------------- */
  --ds-navy-900: #071528;
  --ds-navy-800: #0b1f3a;
  --ds-navy-700: #14304f;
  --ds-navy-600: #1d4269;
  --ds-navy-500: #2a5885;

  --ds-gold-600: #8a6f14;
  --ds-gold-500: #a8871c;
  --ds-gold-400: #c9a227;
  --ds-gold-300: #e8c558;
  --ds-gold-200: #f5e3ac;

  --ds-neutral-0: #ffffff;
  --ds-neutral-50: #f7f8fa;
  --ds-neutral-100: #eef1f5;
  --ds-neutral-200: #dfe4ec;
  --ds-neutral-300: #c3cbd8;
  --ds-neutral-400: #94a1b5;
  --ds-neutral-500: #64748b;
  --ds-neutral-600: #47546b;
  --ds-neutral-700: #334155;
  --ds-neutral-800: #1e293b;
  --ds-neutral-900: #0f172a;

  --ds-success: #15803d;
  --ds-danger: #b91c1c;

  /* ---------------------------------------------------------------
   * Semantic roles
   * ------------------------------------------------------------- */
  --ds-brand: var(--ds-navy-800);
  --ds-brand-hover: var(--ds-navy-700);
  --ds-accent: var(--ds-gold-400);
  --ds-accent-hover: var(--ds-gold-300);

  /* Gold at 4.5:1+ on light surfaces. --ds-accent fails as text on white
     (2.4:1), so anything that renders gold *type* must use this instead. */
  --ds-accent-ink: var(--ds-gold-600);

  /* Ink that sits on top of a gold fill. */
  --ds-on-accent: var(--ds-navy-900);
  --ds-on-brand: var(--ds-neutral-0);

  --ds-bg: var(--ds-neutral-50);
  --ds-surface: var(--ds-neutral-0);
  --ds-surface-sunken: var(--ds-neutral-100);
  --ds-border: var(--ds-neutral-200);
  --ds-border-strong: var(--ds-neutral-300);

  --ds-text: var(--ds-neutral-700);
  --ds-text-strong: var(--ds-navy-800);
  --ds-text-muted: var(--ds-neutral-500);
  --ds-text-inverse: var(--ds-neutral-0);

  --ds-focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.45);

  /* ---------------------------------------------------------------
   * Typography — 1.25 modular scale, 16px base
   * ------------------------------------------------------------- */
  --ds-font-sans: "Vazirmatn", Tahoma, Arial, sans-serif;

  --ds-weight-light: 300;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-bold: 700;

  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: clamp(1.25rem, 0.5vw + 1.13rem, 1.375rem);
  --ds-text-2xl: clamp(1.5rem, 1vw + 1.25rem, 1.75rem);
  --ds-text-3xl: clamp(1.75rem, 1.8vw + 1.4rem, 2.25rem);
  --ds-text-4xl: clamp(2rem, 2.8vw + 1.5rem, 3rem);
  --ds-text-5xl: clamp(2.35rem, 4.2vw + 1.5rem, 3.75rem);

  /* Persian needs more leading than Latin at the same size. */
  --ds-leading-tight: 1.45;
  --ds-leading-snug: 1.6;
  --ds-leading-normal: 1.8;
  --ds-leading-relaxed: 2;

  --ds-tracking-tight: -0.01em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.04em;

  --ds-measure: 68ch;

  /* ---------------------------------------------------------------
   * Spacing — 4px base
   * ------------------------------------------------------------- */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-24: 6rem;
  --ds-space-32: 8rem;

  --ds-section-y: clamp(var(--ds-space-16), 7vw, var(--ds-space-24));
  --ds-gutter: clamp(var(--ds-space-4), 4vw, var(--ds-space-8));
  --ds-container: 1180px;

  /* ---------------------------------------------------------------
   * Radius / elevation / motion
   * ------------------------------------------------------------- */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 24px;
  --ds-radius-pill: 999px;

  /* Two-layer shadows: tight contact + wide ambient. */
  --ds-shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.06);
  --ds-shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 2px 8px rgba(11, 31, 58, 0.06);
  --ds-shadow-md: 0 2px 4px rgba(11, 31, 58, 0.06), 0 8px 20px rgba(11, 31, 58, 0.09);
  --ds-shadow-lg: 0 4px 8px rgba(11, 31, 58, 0.07), 0 16px 40px rgba(11, 31, 58, 0.12);
  --ds-shadow-xl: 0 8px 16px rgba(11, 31, 58, 0.08), 0 28px 64px rgba(11, 31, 58, 0.16);
  --ds-shadow-accent: 0 6px 20px rgba(201, 162, 39, 0.32);

  --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-duration-fast: 150ms;
  --ds-duration: 250ms;
  --ds-duration-slow: 400ms;

  --ds-z-header: 100;
  --ds-z-drawer: 200;
  --ds-z-preloader: 999999;

  /* ---------------------------------------------------------------
   * Legacy aliases — existing style.css reads these.
   * --pc-primary is the *accent* (buttons), --pc-dark is the brand navy.
   * ------------------------------------------------------------- */
  --pc-bg: var(--ds-bg);
  --pc-surface: var(--ds-surface);
  --pc-primary: var(--ds-accent);
  --pc-primary-dark: var(--ds-gold-500);
  --pc-dark: var(--ds-brand);
  --pc-text: var(--ds-text);
  --pc-muted: var(--ds-text-muted);
  --pc-radius: var(--ds-radius-lg);
  --pc-glass-bg: rgba(255, 255, 255, 0.14);
  --pc-glass-border: rgba(255, 255, 255, 0.28);
  --pc-header-height: 82px;
}

html[data-theme="dark"] {
  --ds-bg: #060f1d;
  --ds-surface: #0d1a2d;
  --ds-surface-sunken: #091422;
  --ds-border: rgba(148, 163, 184, 0.18);
  --ds-border-strong: rgba(148, 163, 184, 0.3);

  --ds-brand: #050d1a;
  --ds-brand-hover: var(--ds-navy-700);

  /* On dark surfaces the bright gold is already accessible, so ink and
     fill can converge. */
  --ds-accent: var(--ds-gold-300);
  --ds-accent-hover: var(--ds-gold-200);
  --ds-accent-ink: var(--ds-gold-300);

  --ds-text: #dbe3ee;
  --ds-text-strong: #f8fafc;
  --ds-text-muted: #9fb0c6;

  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --ds-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.38);
  --ds-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.44), 0 16px 40px rgba(0, 0, 0, 0.46);
  --ds-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.48), 0 28px 64px rgba(0, 0, 0, 0.55);
  --ds-shadow-accent: 0 6px 20px rgba(232, 197, 88, 0.24);

  --ds-focus-ring: 0 0 0 3px rgba(232, 197, 88, 0.5);

  --pc-glass-bg: rgba(13, 26, 45, 0.74);
  --pc-glass-border: rgba(148, 163, 184, 0.24);
  --pc-primary-dark: var(--ds-gold-200);
}