/* ─────────────────────────────────────────────────────────────────────────
   Maqam — Design tokens (handoff)
   v1.0 · Phase 1 · 20 May 2026

   Drop this into your stylesheet head. Every value here matches the
   Phase 1 visual identity exactly — change here, change everywhere.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Webfonts (Google Fonts) ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Nastaliq+Urdu:wght@400;600;700&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────────────
     BRAND COLORS
     ───────────────────────────────────────────────────────────────── */

  /* Primary — Lahori Teal */
  --brand-primary:        #0F4C46;  /* PRIMARY · CTAs, links, active nav */
  --brand-primary-hover:  #0A3833;  /* Button hover, pressed */
  --brand-primary-soft:   #DCE9E6;  /* Badge bg, status tints */
  --brand-primary-tint:   #F1F6F4;  /* Hero pill, soft hover */
  --brand-primary-ondark: #5DB3A6;  /* On-dark, dark-mode primary */

  /* Accent — Mughal Clay */
  --brand-accent:         #C8704A;  /* ACCENT · highlights, secondary CTAs */
  --brand-accent-hover:   #B25A36;
  --brand-accent-soft:    #F9E8DC;  /* Notice banners */
  --brand-accent-tint:    #FCF3EC;  /* Accent strips */

  /* WhatsApp — first-class channel */
  --brand-whatsapp:       #25D366;
  --brand-whatsapp-hover: #1FB854;

  /* ─────────────────────────────────────────────────────────────────
     SURFACES & NEUTRALS — warm-tinted grays
     ───────────────────────────────────────────────────────────────── */

  --page-bg:             #FAF8F4;  /* warm cream — marketing + app bg */
  --page-bg-banded:      #F4F0E8;  /* deeper cream — alternating strip */
  --card-bg:             #FFFFFF;  /* cards stay pure white for clarity */

  --border:              #E8E2D5;  /* card borders */
  --border-light:        #F2EDE2;  /* hairline dividers */
  --border-strong:       #D9D2C5;  /* input borders */

  /* Foreground — warm grays */
  --fg-1:                #1A1714;  /* primary text, page titles */
  --fg-2:                #403930;  /* body text */
  --fg-3:                #6D655B;  /* muted body, sub-copy */
  --fg-muted:            #9F968A;  /* micro labels, placeholders */
  --fg-faint:            #C9C0B0;  /* dividers in copy */
  --fg-onbrand:          #FCFAF6;  /* text on teal CTAs */

  /* Sidebar (dark surface) */
  --sidebar-bg:          #0E1A18;
  --sidebar-text:        #8A9590;
  --sidebar-text-strong: #F3F0EA;
  --sidebar-text-active: #5DB3A6;

  /* ─────────────────────────────────────────────────────────────────
     STATUS PALETTE — booking + expense states
     ───────────────────────────────────────────────────────────────── */

  --status-confirmed-bg:    #ECF7F0;  --status-confirmed-fg:    #1F6E47;
  --status-inquiry-bg:      #F1F6F4;  --status-inquiry-fg:      #0F4C46;
  --status-rescheduled-bg:  #FCF1E1;  --status-rescheduled-fg:  #92580E;
  --status-checked-in-bg:   #F2EFF8;  --status-checked-in-fg:   #5A3FA8;
  --status-checked-out-bg:  #F2EDE2;  --status-checked-out-fg:  #6D655B;
  --status-cancelled-bg:    #F8E8E2;  --status-cancelled-fg:    #98361A;
  --status-pending-bg:      #FCF7E0;  --status-pending-fg:      #8A6608;
  --status-no-show-bg:      #FCF3EC;  --status-no-show-fg:      #B25A36;
  --status-bcom-lead-bg:    #FBE9EB;  --status-bcom-lead-fg:    #A52A3E;

  /* ─────────────────────────────────────────────────────────────────
     TYPE
     ───────────────────────────────────────────────────────────────── */

  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-urdu:    'Noto Nastaliq Urdu', 'Inter', sans-serif;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* Hero (marketing) — clamp scale for responsive  */
  --type-hero-size:      clamp(2.75rem, 5vw + 1rem, 4.5rem);  /* 44 → 72 px */
  --type-hero-weight:    800;
  --type-hero-leading:   1.02;
  --type-hero-tracking:  -0.035em;

  /* Section heading */
  --type-section-size:    clamp(1.875rem, 2vw + 1rem, 2.5rem); /* 30 → 40 px */
  --type-section-weight:  700;
  --type-section-leading: 1.15;
  --type-section-tracking: -0.025em;

  /* App page title */
  --type-page-title-size:     1.5rem;     /* 24px */
  --type-page-title-weight:   700;
  --type-page-title-leading:  1.25;
  --type-page-title-tracking: -0.02em;

  /* h3 — card heads */
  --type-h3-size:    1.125rem;  /* 18px */
  --type-h3-weight:  700;
  --type-h3-leading: 1.35;

  /* h4 — list-item titles */
  --type-h4-size:    1rem;      /* 16px */
  --type-h4-weight:  600;

  /* Body */
  --type-body-size:    0.9375rem;  /* 15px */
  --type-body-weight:  400;
  --type-body-leading: 1.6;

  /* Small text */
  --type-small-size:   0.875rem;   /* 14px */
  --type-small-weight: 500;

  /* Caption / extra small */
  --type-xs-size:      0.75rem;    /* 12px */
  --type-xs-weight:    500;

  /* Micro labels (uppercase tracked) */
  --type-micro-size:     0.6875rem;  /* 11px */
  --type-micro-weight:   600;
  --type-micro-tracking: 0.12em;

  /* ─────────────────────────────────────────────────────────────────
     RADII
     ───────────────────────────────────────────────────────────────── */

  --radius-sm:   6px;      /* skeletons, scrollbar */
  --radius:      8px;      /* inputs, small chrome */
  --radius-md:   10px;
  --radius-lg:   12px;     /* buttons, stat cards */
  --radius-xl:   16px;     /* feature cards, form cards */
  --radius-2xl:  20px;
  --radius-full: 9999px;   /* badges, avatars, pills */

  /* ─────────────────────────────────────────────────────────────────
     SHADOWS — warm-tinted, slightly softer than cool defaults
     ───────────────────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 2px 0 rgba(26, 23, 20, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(26, 23, 20, 0.07), 0 2px 4px -2px rgba(26, 23, 20, 0.04);
  --shadow-lg:  0 10px 15px -3px rgba(26, 23, 20, 0.08), 0 4px 6px -4px rgba(26, 23, 20, 0.05);
  --shadow-xl:  0 20px 35px -8px rgba(26, 23, 20, 0.14), 0 8px 12px -6px rgba(26, 23, 20, 0.06);
  --shadow-cta: 0 10px 22px -6px rgba(15, 76, 70, 0.42), 0 4px 8px -4px rgba(15, 76, 70, 0.18);

  /* ─────────────────────────────────────────────────────────────────
     SPACING — Tailwind defaults
     ───────────────────────────────────────────────────────────────── */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ─────────────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────────────── */

  --motion-fast:   150ms ease;
  --motion-base:   200ms ease;
  --motion-slow:   320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}