/* =========================================================================
   Prashanti Clinic — Design Tokens
   Load this file at the top of any prototype:
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --lavender-300: #C9B8DD;
  --lavender-400: #A78BC9;
  --lavender-500: #7B5EA7;   /* primary brand purple — logo lotus */
  --lavender-600: #62478C;
  --violet-700:   #4A2D6F;   /* deepest plum — headings, wordmark on light */
  --violet-900:   #2A1A4A;

  --teal-400:     #4FB0BC;
  --teal-600:     #057C8B;   /* secondary — ophthalmology icon fill */
  --teal-800:     #044F58;

  /* Saffron lives ONLY inside icon glyphs — do not use as surface */
  --saffron-400:  #FF9937;
  --saffron-500:  #FE6A2E;
  --icon-warm-gradient: radial-gradient(circle at 30% 30%, #FF9937, #FE6A2E 90%);

  /* ---------- Neutrals (warm) ---------- */
  --bg:           #FAF8F5;   /* page surface */
  --bg-soft:      #F2EEF7;   /* mist – section delineation */
  --bg-warm:      #F5EFE7;   /* warm sand alt */
  --surface:      #FFFFFF;   /* pure white reserved for cards on tinted bg */
  --hairline:     #E8E2DA;   /* warm border */
  --hairline-cool:#E0DAEA;   /* violet-tinted border */

  --ink-900:      #1A1530;   /* body & headlines */
  --ink-700:      #3D3556;
  --ink-500:      #6A6280;   /* secondary text */
  --ink-400:      #8A839F;   /* tertiary / captions */
  --ink-300:      #B8B2C6;   /* disabled */

  /* ---------- Semantic ---------- */
  --fg-1:         var(--ink-900);
  --fg-2:         var(--ink-500);
  --fg-3:         var(--ink-400);
  --fg-on-dark:   #F5F0FA;

  --bg-1:         var(--bg);
  --bg-2:         var(--bg-soft);
  --bg-card:      var(--surface);
  --bg-dark:      var(--ink-900);

  --border:       var(--hairline);
  --border-soft:  var(--hairline-cool);

  --accent:       var(--lavender-500);
  --accent-deep:  var(--violet-700);
  --accent-2:     var(--teal-600);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type ramp — desktop. Multiply by 0.85 for mobile via media query. */
  --t-display-1: 600 72px/1.05 var(--font-display);   /* hero */
  --t-display-2: 600 56px/1.08 var(--font-display);   /* page title */
  --t-h1:        600 44px/1.15 var(--font-display);
  --t-h2:        500 32px/1.25 var(--font-display);
  --t-h3:        600 22px/1.35 var(--font-body);
  --t-h4:        600 18px/1.4  var(--font-body);
  --t-body-lg:   400 18px/1.6  var(--font-body);
  --t-body:      400 16px/1.6  var(--font-body);
  --t-body-sm:   400 14px/1.55 var(--font-body);
  --t-caption:   500 12px/1.4  var(--font-body);
  --t-overline:  600 11px/1.2  var(--font-body);     /* + letter-spacing: 0.12em, uppercase */
  --t-button:    600 15px/1    var(--font-body);

  /* ---------- Spacing (8pt grid) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 9999px;

  /* ---------- Shadows (warm, violet-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(74, 45, 111, 0.05);
  --shadow-sm: 0 1px 2px rgba(74, 45, 111, 0.06), 0 2px 6px rgba(74, 45, 111, 0.04);
  --shadow-md: 0 6px 20px rgba(74, 45, 111, 0.10), 0 2px 4px rgba(74, 45, 111, 0.06);
  --shadow-lg: 0 16px 40px rgba(74, 45, 111, 0.14), 0 4px 8px rgba(74, 45, 111, 0.06);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 400ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: 24px;
}

/* ---------- Semantic element bindings ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font: var(--t-h1);    color: var(--violet-700); margin: 0 0 var(--space-5); letter-spacing: -0.01em; }
h2 { font: var(--t-h2);    color: var(--violet-700); margin: 0 0 var(--space-4); letter-spacing: -0.005em; }
h3 { font: var(--t-h3);    color: var(--ink-900);    margin: 0 0 var(--space-3); }
h4 { font: var(--t-h4);    color: var(--ink-900);    margin: 0 0 var(--space-2); }
p  { font: var(--t-body);  color: var(--fg-1);       margin: 0 0 var(--space-4); text-wrap: pretty; }
small { font: var(--t-caption); color: var(--fg-2); }

a { color: var(--lavender-600); text-decoration: none; transition: opacity var(--dur) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:active { opacity: 0.7; }

.overline {
  font: var(--t-overline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lavender-600);
}

@media (max-width: 768px) {
  :root {
    --t-display-1: 600 44px/1.1  var(--font-display);
    --t-display-2: 600 36px/1.15 var(--font-display);
    --t-h1:        600 30px/1.2  var(--font-display);
    --t-h2:        500 24px/1.3  var(--font-display);
  }
}