/* ==========================================================================
   VastuEasy — Design Tokens
   ==========================================================================
   The ONLY theming file for the marketing shell. Loaded before every other
   stylesheet on every shell page (see design-spec.md §2, §10).

   These --vc-* names are the same names the Vastu Canvas tool itself reads
   for its own base-UI theme. The tool is reached directly at /vastu-canvas/
   as its own real page (not wrapped or iframed by the marketing shell — it
   needs the full viewport for its own rail/topbar/canvas layout), so this
   file does not cascade into it — the tool already ships its own reskinned
   styles.css with the same token names, kept in sync by hand.

   Zero-drift rule: every hex below is copied verbatim from design-spec.md
   §2.1–2.2. Do not "round" or approximate any value.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  /* ---- 2.1 Core tokens (exact names the tool reads — do not rename) ---- */
  --vc-primary: #B8860B;       /* Primary actions, active tab, links, key icons.
                                   Razorpay Checkout theme.color when payments
                                   land in phase 2: theme: { color: '#B8860B' } */
  --vc-primary-dark: #8B6508;  /* Hover/pressed on primary, emphasized headings */
  --vc-bg: #FFFBF0;            /* Page background (warm cream) */
  --vc-panel: #FFFFFF;         /* Cards, panels, tab bodies, table surfaces */
  --vc-panel-border: #E8D5A0;  /* Card/panel borders, input borders */
  --vc-text: #2C1A00;          /* Primary text */
  --vc-text-muted: #8B6508;    /* Secondary/muted text, captions, meta */
  --vc-accent: #7B4F9E;        /* Purple accent: zone highlights, badges, selected chakra states */
  --vc-danger: #B71C1C;        /* Negative/dosha indicators, destructive actions */
  --vc-good: #2E7D32;          /* Positive/auspicious indicators, success states */

  /* ---- 2.2 Extended tokens (additive, safe — tool ignores unknown vars) ---- */
  --vc-bg-alt: #FFF8E7;        /* Alternating page sections, table zebra rows */
  --vc-divider: #F0E4B8;       /* Hairline dividers, table row rules */
  --vc-text-medium: #5C3D00;   /* Body copy on marketing pages */
  --vc-text-light: #9A7A20;    /* Tertiary text, disabled labels, footer meta */
  --vc-accent-dark: #5E3A7D;   /* Hover/pressed on purple accent */
  --vc-accent-tint: #F3EDF8;   /* Purple-tinted fills behind badges/labels */
  --vc-primary-tint: #F7EED6;  /* Gold-tinted fills: ghost-button hover, selected rows */
  --vc-good-bg: #E8F5E9;       /* Background behind positive status chips */
  --vc-danger-bg: #FFEBEE;     /* Background behind negative status chips */
  --vc-neutral: #1565C0;       /* Informational status (status chips only, never UI chrome) */
  --vc-neutral-bg: #E3F2FD;    /* Background behind informational chips */

  /* ---- 2.3 Derived interaction states ---- */
  --vc-primary-darker: #6E4F06;      /* primary button pressed state */
  --vc-primary-tint-pressed: #EFE2C2; /* ghost/secondary button pressed fill */
  --vc-focus-ring: 2px solid var(--vc-primary);

  /* ---- 2.4 Non-color tokens ---- */
  --vc-radius: 10px;      /* cards, inputs */
  --vc-radius-sm: 6px;    /* chips, table cells */
  --vc-radius-pill: 999px; /* buttons */
  --vc-shadow: 0 2px 12px rgba(44, 26, 0, 0.08);       /* one soft elevation, never stacked */
  --vc-shadow-modal: 0 2px 12px rgba(44, 26, 0, 0.16); /* modal panel elevation */
  --vc-scrim: rgba(44, 26, 0, 0.4);                    /* modal backdrop */

  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96px */
  --vc-space-1: 4px;
  --vc-space-2: 8px;
  --vc-space-3: 12px;
  --vc-space-4: 16px;
  --vc-space-5: 24px;
  --vc-space-6: 32px;
  --vc-space-7: 48px;
  --vc-space-8: 64px;
  --vc-space-9: 96px;

  /* Type faces */
  --vc-font-heading: 'Fraunces', serif;
  --vc-font-body: 'Work Sans', sans-serif;

  /* Layout */
  /* Full-bleed by request (2026-08-17): every consumer already pairs this
     with margin:0 auto and its own 40px (20px mobile) side padding, so "none"
     fills the viewport minus that gutter rather than touching the edge. */
  --vc-max-width: none;
  --vc-nav-height: 64px;
}

/* ==========================================================================
   Base reset + global typography (§3)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vc-bg);
  color: var(--vc-text);
  font-family: var(--vc-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

/* Headings — Fraunces 500-600, never 700+ */
h1, h2, h3, h4 {
  font-family: var(--vc-font-heading);
  font-weight: 560;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--vc-text);
  text-wrap: pretty;
}

/* Display (hero) — 56 → 36px / 1.1 / Fraunces 560 */
.vc-display {
  font-family: var(--vc-font-heading);
  font-weight: 560;
  font-size: clamp(36px, 4.6vw + 12px, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  color: var(--vc-text);
  text-wrap: pretty;
}

/* H1 (page title) — 40 → 30px / 1.15 */
h1 { font-size: clamp(30px, 3vw + 14px, 40px); line-height: 1.15; }

/* H2 (section) — 30 → 24px / 1.2 */
h2 { font-size: clamp(24px, 1.6vw + 14px, 30px); line-height: 1.2; font-weight: 540; }

/* H3 (card title) — 20 → 18px / 1.3 */
h3 { font-size: clamp(18px, 0.6vw + 14px, 20px); line-height: 1.3; font-weight: 540; }

/* Body — 17 → 16px / 1.6, Work Sans 400, --vc-text-medium */
p {
  font-size: clamp(16px, 0.3vw + 15px, 17px);
  line-height: 1.6;
  color: var(--vc-text-medium);
  margin: 0 0 1em;
}
p:last-child { margin-bottom: 0; }

/* Small/meta — 14px / 1.5, --vc-text-light */
small, .vc-meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--vc-text-light);
}

/* Button/label — 15px / 1, Work Sans 500, ls 0.01em */
button, .vc-btn, label, input, select, textarea {
  font-family: var(--vc-font-body);
}

/* Overline/kicker — 12px caps, ls 0.12em, Work Sans 600, --vc-text-muted */
.vc-kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vc-text-muted);
  margin-bottom: 14px;
}

/* Links — --vc-primary, hover --vc-primary-dark; underlined on hover in body
   copy, always underlined inside long-form text (see .vc-prose) */
a { color: var(--vc-primary); text-decoration: none; }
a:hover { color: var(--vc-primary-dark); }
p a, .vc-prose a, .vc-nav-link, .vc-footer-link { text-underline-offset: 3px; }
p a:hover, .vc-prose a { text-decoration: underline; }

/* Focus ring (keyboard) — never the browser-default blue */
*:focus-visible {
  outline: var(--vc-focus-ring);
  outline-offset: 2px;
}

::selection { background: var(--vc-primary-tint); }