/* ============================================================
   Design System — Avinash Shikaripurmohan
   Playfair Display (serif headings) + Inter (body/UI)
   Palette: warm ivory · indigo · mist blue · teal · terracotta · gold
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500&display=swap");

:root {
  /* ---- Raw palette ---- */
  --indigo:        #1E3A4A;
  --indigo-mid:    #2C4E63;
  --mist-blue:     #8BAFC0;
  --mist-light:    #C5D8E2;
  --teal:          #3A8F9F;
  --teal-dark:     #2D7282;
  --warm-ivory:    #FAF1E8;
  --warm-ivory-2:  #F0E6D6;
  --stone:         #B2BDAD;
  --stone-light:   #D6DDD1;
  --silver-mist:   #8BAAB0;
  --terracotta:    #C4724A;
  --antique-gold:  #B89A52;
  --gilded-gold:   #D4A837;
  --white:         #FFFFFF;

  /* ---- Semantic ---- */
  --bg:           var(--warm-ivory);
  --bg-2:         var(--warm-ivory-2);
  --surface:      var(--white);
  --fg:           var(--indigo);
  --fg-2:         var(--indigo-mid);
  --fg-3:         var(--mist-blue);
  --accent:       var(--terracotta);
  --accent-gold:  var(--antique-gold);
  --border:       rgba(30, 58, 74, 0.10);
  --border-hover: rgba(30, 58, 74, 0.22);

  /* ---- Fonts ---- */
  --font-serif: "Playfair Display", "Georgia", serif;
  --font-sans:  "Inter", system-ui, -apple-system, Arial, sans-serif;

  /* ---- Type scale ---- */
  --size-display: 4.5rem;
  --size-h1:      3.5rem;
  --size-h2:      2.5rem;
  --size-h3:      1.75rem;
  --size-h4:      1.375rem;
  --size-body-l:  1.25rem;
  --size-body:    1.0625rem;
  --size-body-s:  0.9375rem;
  --size-label:   0.8125rem;
  --size-label-s: 0.6875rem;

  /* ---- Spacing ---- */
  --gap-xs:  0.5rem;
  --gap-s:   1rem;
  --gap-m:   2rem;
  --gap-l:   3rem;
  --gap-xl:  5rem;
  --gap-2xl: 8rem;
  --margin:  4rem;

  /* ---- Radius ---- */
  --r-s:    0.25rem;
  --r-m:    0.5rem;
  --r-l:    1rem;
  --r-pill: 100vw;

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;

  /* ---- Shadows ---- */
  --shadow-s: 0 1px 3px rgba(30,58,74,0.06);
  --shadow-m: 0 4px 20px -4px rgba(30,58,74,0.10);
  --shadow-l: 0 12px 40px -8px rgba(30,58,74,0.14);
}

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

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.6;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}
a:hover { opacity: 0.65; }