/* =========================================================================
   Keerthi & Gopi — Wedding Design System
   Colors & Type Tokens
   ========================================================================= */

/* Google Fonts — load once per page. Duplicate import here is harmless. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Infant:ital,wght@0,400;0,500;0,600;1,400&family=Marcellus&family=Great+Vibes&family=Pinyon+Script&family=Jost:wght@300;400;500;600&family=Tiro+Telugu:ital@0;1&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLORS — raw palette
     ----------------------------------------------------------------------- */

  /* Primary — Marsala / Deep maroon, the wedding silk */
  --marsala-900: #3A1A1C;
  --marsala-800: #4F1820;
  --marsala-700: #7A1F2B;   /* primary */
  --marsala-600: #912633;
  --marsala-500: #A7394A;
  --marsala-400: #C46A77;
  --marsala-300: #DDA0A9;
  --marsala-200: #ECC8CD;
  --marsala-100: #F6E3E6;

  /* Gold — Temple gold, warm and never yellow-white */
  --gold-900: #6E4F17;
  --gold-800: #8A6822;
  --gold-700: #A7832E;
  --gold-600: #C79A3A;   /* primary gold */
  --gold-500: #D9B15F;
  --gold-400: #E6C685;
  --gold-300: #EED9A9;
  --gold-200: #F5E8C8;
  --gold-100: #FAF2DF;

  /* Saffron / Kumkum — sparing accent */
  --saffron-700: #C44815;
  --saffron-600: #E85D1F;   /* primary accent */
  --saffron-500: #F07A3E;
  --saffron-400: #F69A63;

  /* Marigold — secondary accent */
  --marigold-700: #C68321;
  --marigold-600: #E89A2B;
  --marigold-500: #F2A93B;   /* primary marigold */
  --marigold-400: #F7BE63;

  /* Emerald — foliage, used sparingly */
  --emerald-800: #1F4A34;
  --emerald-700: #2F6B4E;   /* primary emerald */
  --emerald-600: #3F8862;
  --emerald-500: #61A883;

  /* Ivory / Cream — surfaces */
  --ivory-50:  #FEFBF4;
  --ivory-100: #FBF3E3;   /* primary surface */
  --ivory-200: #F7EBD0;
  --ivory-300: #F3E7CC;   /* aged paper */
  --ivory-400: #E8D6A8;

  /* Ink — text */
  --ink-900: #2A0F11;
  --ink-800: #3A1A1C;   /* body copy — rosewood ink */
  --ink-700: #5B2F32;
  --ink-600: #7A4A4D;
  --ink-500: #9B7276;
  --ink-400: #BFA09F;

  /* -----------------------------------------------------------------------
     SEMANTIC COLORS
     ----------------------------------------------------------------------- */
  --bg:               var(--ivory-100);
  --bg-alt:           var(--ivory-300);
  --bg-deep:          var(--marsala-700);
  --bg-deep-ink:      var(--marsala-900);
  --surface:          var(--ivory-50);
  --surface-raised:   #FFFDF7;

  --fg:               var(--ink-800);
  --fg-muted:         var(--ink-600);
  --fg-soft:          var(--ink-500);
  --fg-on-dark:       var(--ivory-100);
  --fg-on-dark-muted: var(--gold-300);

  --accent:           var(--marsala-700);
  --accent-hover:     var(--marsala-600);
  --accent-press:     var(--marsala-800);
  --accent-soft:      var(--marsala-100);

  --gold:             var(--gold-600);
  --gold-soft:        var(--gold-200);
  --gold-line:        var(--gold-500);

  --saffron:          var(--saffron-600);
  --marigold:         var(--marigold-500);
  --emerald:          var(--emerald-700);

  --border:           var(--gold-500);
  --border-soft:      var(--gold-300);
  --border-hair:      rgba(199, 154, 58, 0.35);

  --success:          var(--emerald-700);
  --warning:          var(--marigold-600);
  --danger:           var(--saffron-700);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — raw families
     ----------------------------------------------------------------------- */
  --font-display:   'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:      'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
  --font-ui:        'Marcellus', 'Jost', 'Trebuchet MS', sans-serif;
  --font-sans:      'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:    'Great Vibes', 'Pinyon Script', cursive;
  --font-telugu:    'Tiro Telugu', 'Cormorant Garamond', serif;

  /* -----------------------------------------------------------------------
     TYPE SCALE — size / line-height / tracking
     ----------------------------------------------------------------------- */
  --fs-xs:     0.75rem;   /* 12 */
  --fs-sm:     0.875rem;  /* 14 */
  --fs-base:   1rem;      /* 16 */
  --fs-md:     1.125rem;  /* 18 */
  --fs-lg:     1.375rem;  /* 22 */
  --fs-xl:     1.75rem;   /* 28 */
  --fs-2xl:    2.25rem;   /* 36 */
  --fs-3xl:    3rem;      /* 48 */
  --fs-4xl:    4rem;      /* 64 */
  --fs-5xl:    5.5rem;    /* 88 */
  --fs-hero:   7.5rem;    /* 120 — the couple's names */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --tr-tight:   -0.02em;
  --tr-normal:   0;
  --tr-wide:     0.08em;
  --tr-wider:    0.18em;
  --tr-widest:   0.28em;

  /* -----------------------------------------------------------------------
     SPACING — 8pt grid
     ----------------------------------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    24px;
  --r-xl:    32px;
  --r-pill:  999px;

  /* -----------------------------------------------------------------------
     SHADOWS — warm-tinted, never gray
     ----------------------------------------------------------------------- */
  --shadow-card:     0 8px 24px rgba(58, 26, 28, 0.08), 0 2px 6px rgba(58, 26, 28, 0.06);
  --shadow-raised:   0 24px 60px rgba(122, 31, 43, 0.14), 0 6px 16px rgba(58, 26, 28, 0.08);
  --shadow-gold:     0 0 0 1px rgba(199, 154, 58, 0.45), 0 8px 24px rgba(199, 154, 58, 0.18);
  --shadow-inner:    inset 0 2px 4px rgba(58, 26, 28, 0.12);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-med:     320ms;
  --dur-slow:    500ms;
}

/* =========================================================================
   BASE ELEMENTS
   ========================================================================= */

html {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
}

/* ---- Semantic text styles ---- */
.t-hero, h1.hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--marsala-700);
  font-style: italic;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--marsala-700);
  margin: 0 0 var(--sp-5);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--marsala-700);
  margin: 0 0 var(--sp-4);
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--marsala-700);
  margin: 0 0 var(--sp-3);
}

h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--ink-800);
  margin: 0 0 var(--sp-3);
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
}

.t-lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-700);
}

.t-small, small {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-muted);
}

.t-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--gold-700);
}

.t-script {
  font-family: var(--font-script);
  font-size: var(--fs-4xl);
  line-height: 1;
  color: var(--gold-700);
  font-weight: 400;
}

.t-ui {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  letter-spacing: var(--tr-wide);
  color: var(--fg);
}

.t-telugu {
  font-family: var(--font-telugu);
  font-size: var(--fs-2xl);
  color: var(--marsala-700);
  line-height: var(--lh-snug);
}

a {
  color: var(--marsala-700);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-500);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--marsala-600); border-color: var(--gold-600); }

code, pre, .t-mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.95em;
  background: var(--ivory-300);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
  color: var(--ink-800);
}

hr, .t-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  margin: var(--sp-6) auto;
}

::selection { background: var(--gold-300); color: var(--marsala-900); }