/* ============================================================
   PURUSHOTTAM CLASSES — Design Tokens
   Based on Awesomic Style Reference (design.md)
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────── */
  --color-obsidian: #09090b;
  --color-ink: #18181b;
  --color-graphite: #3f3f46;
  --color-slate: #52525b;
  --color-steel: #71717a;
  --color-ash: #a1a1aa;
  --color-pebble: #d4d4d8;
  --color-fog: #ececee;
  --color-mist: #f4f4f5;
  --color-snow: #ffffff;

  /* Accent — restricted use per guidelines */
  --color-ember: #ff5a00;
  --color-orchid-flash: #fe45e2;

  /* Semantic aliases */
  --color-text-primary: var(--color-obsidian);
  --color-text-body: var(--color-ink);
  --color-text-muted: var(--color-steel);
  --color-text-subtle: var(--color-ash);
  --color-text-inverse: var(--color-snow);
  --color-bg-canvas: var(--color-mist);
  --color-bg-card: var(--color-snow);
  --color-bg-card-muted: var(--color-fog);
  --color-bg-dark: var(--color-obsidian);
  --color-border: var(--color-fog);
  --color-border-strong: var(--color-graphite);

  /* WhatsApp brand color — used only on WhatsApp CTA */
  --color-whatsapp: #25d366;

  /* ── Typography — Font Family ───────────────────── */
  --font-primary: 'DM Sans', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Typography — Weights ───────────────────────── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Typography — Scale ─────────────────────────── */
  --text-caption: 10px;
  --leading-caption: 1.8;

  --text-xs: 12px;
  --leading-xs: 1.6;

  --text-sm: 13px;
  --leading-sm: 1.56;

  --text-body: 14px;
  --leading-body: 1.56;

  --text-body-lg: 16px;
  --leading-body-lg: 1.5;

  --text-subheading: 18px;
  --leading-subheading: 1.45;

  --text-heading-sm: 20px;
  --leading-heading-sm: 1.35;

  --text-heading: 32px;
  --leading-heading: 1.28;

  --text-heading-lg: 40px;
  --leading-heading-lg: 1.25;

  --text-display-sm: 56px;
  --leading-display-sm: 1.12;

  --text-display: 64px;
  --leading-display: 1;

  /* ── Spacing ────────────────────────────────────── */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-68: 68px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* ── Layout ─────────────────────────────────────── */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 28px;
  --card-padding-compact: 24px;
  --element-gap: 8px;
  --nav-height: 64px;

  /* ── Border Radius ──────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-badges: 12px;
  --radius-inputs: 14px;
  --radius-buttons-rect: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-cards-compact: 28px;
  --radius-cards: 36px;
  --radius-buttons: 36px;
  --radius-icons: 40px;
  --radius-hero: 48px;
  --radius-pill: 10000px;

  /* ── Shadows ────────────────────────────────────── */
  --shadow-button-primary:
    rgba(255, 255, 255, 0.5) 0px 0.5px 0px 0px inset,
    rgba(117, 123, 133, 0.4) 0px 9px 14px -5px inset,
    rgb(44, 46, 52) 0px 0px 0px 1.5px,
    rgba(0, 0, 0, 0.14) 0px 4px 6px 0px;
  --shadow-card-inset: rgb(228, 228, 231) 0px 1px 0px 0px inset;
  --shadow-card-subtle: rgba(0, 0, 0, 0.04) 0px 4px 12px 0px;
  --shadow-inset-highlight: rgb(255, 255, 255) 0px 0.5px 0px 0px inset;
  --shadow-inset-top: rgb(255, 255, 255) 0px -0.5px 0px 0px;
  --shadow-inset-bottom: rgb(228, 228, 231) 0px -1px 0px 0px;

  /* ── Surfaces ───────────────────────────────────── */
  --surface-canvas: var(--color-mist);
  --surface-card: var(--color-snow);
  --surface-card-muted: var(--color-fog);
  --surface-dark: var(--color-obsidian);

  /* ── Transitions ────────────────────────────────── */
  --transition-fast: 0.2s ease;
  --transition-default: 0.3s ease;
  --transition-slow: 0.35s ease;
  --transition-spring: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}