/* ==========================================================================
   Samik Roy Choudhary — Design System
   Colors & Type tokens
   ========================================================================== */


:root {
  /* ----- COLOR PALETTE ---------------------------------------------------- */
  --cream-white:   #F7F5F0;
  --obsidian-black:#111111;
  --warm-sand:     #D9D4C7;
  --linen:         #EEEBE3;

  /* Semantic aliases — DARK THEME (whole site on black) */
  --bg:            #000000;
  --bg-elevated:   #0D0D0D;
  --bg-floating:   #161616;
  --fg:            var(--cream-white);
  --fg-muted:      rgba(247, 245, 240, 0.62);
  --fg-subtle:     rgba(247, 245, 240, 0.40);
  --border:        rgba(247, 245, 240, 0.14);
  --border-strong: var(--cream-white);

  /* Buttons — inverted for dark */
  --btn-primary-bg:    var(--cream-white);
  --btn-primary-fg:    var(--obsidian-black);
  --btn-secondary-bg:  transparent;
  --btn-secondary-fg:  var(--cream-white);
  --btn-secondary-bd:  rgba(247, 245, 240, 0.55);

  /* ----- TYPOGRAPHY ------------------------------------------------------- */
  --font-display:  'Allura', 'Snell Roundhand', cursive;
  --font-sans:     'Montserrat', 'Helvetica Neue', sans-serif;
  --font-serif:    'Cormorant Garamond', 'Garamond', serif;
  --font-body:     'Inter', 'Helvetica Neue', sans-serif;

  /* Type scale */
  --fs-logo:    clamp(48px, 6vw, 88px);
  --fs-h1:      clamp(40px, 5vw, 72px);
  --fs-h2:      clamp(22px, 2.4vw, 32px);
  --fs-h3:      18px;
  --fs-quote:   clamp(22px, 2.2vw, 30px);
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-eyebrow: 11px;

  /* Letter-spacing */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.12em;
  --tracking-eyebrow:  0.32em;

  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-loose:   1.7;

  /* ----- SPACING / RADII / RULES ----------------------------------------- */
  --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;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;

  --hairline:    0.5px;
  --rule-thin:   1px;
  --rule-thick:  2px;

  /* Motion — slow, cinematic */
  --ease-cinema:   cubic-bezier(0.22, 1, 0.36, 1);
  /* Emil Kowalski — stronger curves with real punch */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);
  /* Gentle and symmetric — for washes of colour/light, where the decelerating
     curves above front-load the change and read as a snap. */
  --ease-wash:     cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      600ms;
}

/* ==========================================================================
   Semantic element styles
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.logo, .signature {
  font-family: var(--font-display);
  font-size: var(--fs-logo);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  line-height: 1;
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0;
}

.eyebrow, .label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.pull-quote, blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--leading-normal);
  color: var(--fg);
}

small, .small {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--fg-muted);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-cinema);
}
a:hover { opacity: 0.6; }

hr, .rule {
  border: 0;
  border-top: var(--hairline) solid var(--border);
  margin: 0;
}