/* ==========================================================================
   Thapasvi Photography: design tokens (design.md §3, §3b, §4, §5.3, §6)
   Components never hard-code colours: only these tokens change per theme.
   ========================================================================== */

:root {
  color-scheme: light;

  /* surfaces */
  --c-ivory: #FAF7F2;
  --c-linen: #F3EDE6;
  --c-greige: #E8E0D6;
  --c-blush: #D9C4B6;
  --c-espresso: #2F2620;

  /* text */
  --c-ink: #3A2E27;
  --c-ink-soft: #6E6058;
  --c-on-dark: #F3EDE6;
  --c-on-dark-soft: rgba(243, 237, 230, .78);

  /* brand */
  --c-brand: #522704;
  --c-brand-hover: #3E1D03;
  --c-on-brand: #FAF7F2;
  --c-accent: #A4664A;       /* large display text + decorative lines only */
  --c-accent-deep: #8A4F36;  /* small accent text (AA) */

  /* utility */
  --c-line: rgba(58, 46, 39, .14);
  --c-overlay: rgba(30, 22, 17, .45);
  --c-whatsapp: #25D366;
  --c-whatsapp-ink: #128C4B; /* glyph on light surfaces */
  --c-focus: #A4664A;
  --c-header-solid: rgba(250, 247, 242, .86);
  --c-shadow: rgba(47, 38, 32, .14);
  --c-frame: #FFFDF9;               /* floating frame mat (7b-3): an ivory print border */

  /* form fields (§9): field border ≥ 3:1 against the page and the field, error text ≥ 4.5:1 */
  --c-field: #FFFDF9;
  --c-field-line: #8C7D73;
  --c-error: #A3361F;

  /* First Year mood light (7b-7) */
  --mood-maternity: #EAD7CC;
  --mood-newborn: #F6EFE6;
  --mood-baby: #EEF0E8;
  --mood-cakesmash: #F3E3CF;

  /* typography (§4) */
  --ff-display: "Cormorant Garamond", "Cormorant fallback", "Times New Roman", serif;
  --ff-body: "Jost", "Jost fallback", Arial, sans-serif;
  --ff-script: "Pinyon Script", "Snell Roundhand", cursive;

  --fs-hero: clamp(2.6rem, 1.6rem + 4.2vw, 5.6rem);
  --fs-h1: clamp(2.2rem, 1.5rem + 3vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2vw, 3.2rem);
  --fs-h3: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  --fs-body: clamp(1rem, .96rem + .15vw, 1.0625rem);
  --fs-small: .875rem;
  --fs-eyebrow: .78rem;
  --ls-caps: .26em;

  /* fluid layout (§5.3) */
  --gutter: clamp(20px, 4vw, 64px);
  --container: min(100% - 2 * var(--gutter), 1320px);
  --container-wide: min(100% - 2 * var(--gutter), 1600px);
  --container-text: min(100% - 2 * var(--gutter), 68ch);
  --section-y: clamp(72px, 10vw, 150px);
  --stack-sm: clamp(12px, 1.5vw, 18px);
  --stack-md: clamp(20px, 3vw, 36px);
  --stack-lg: clamp(36px, 5vw, 72px);
  --grid-gap: clamp(8px, 1.6vw, 24px);
  --radius: clamp(2px, .3vw, 4px);
  --header-h: clamp(64px, 6vw, 96px);
  --topbar-h: 0px;
  --tap: 44px;
  --bar-h: 56px;

  /* motion (§6) */
  --ease-out: cubic-bezier(.2, .65, .2, 1);
  --ease-curtain: cubic-bezier(.77, 0, .18, 1);
  --dur-reveal: .8s;
  --dur-theme: .5s;
}

/* Metric-matched fallbacks so the swap to the web fonts doesn't shift layout (CLS).
   size-adjust measured against the real fonts (Times New Roman ≈ Liberation Serif, Arial ≈ Liberation Sans). */
@font-face {
  font-family: "Cormorant fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Times"), local("Noto Serif");
  size-adjust: 96.7%;
  ascent-override: 95.5%;
  descent-override: 29.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"), local("Roboto");
  size-adjust: 92.6%;
  ascent-override: 115.5%;
  descent-override: 40.5%;
  line-gap-override: 0%;
}

/* Charcoal fine-art theme (§3b): opt-in, saved in localStorage, applied before first paint. */
[data-theme="charcoal"] {
  color-scheme: dark;

  --c-ivory: #1C1815;
  --c-linen: #241F1B;
  --c-greige: #2E2823;
  --c-blush: #4A3A31;
  --c-espresso: #120F0D;

  --c-ink: #EDE5DC;
  --c-ink-soft: #B9ADA2;
  --c-on-dark: #EDE5DC;
  --c-on-dark-soft: rgba(237, 229, 220, .78);

  --c-brand: #E3C9B2;
  --c-brand-hover: #F0DCCB;
  --c-on-brand: #1C1815;
  --c-accent: #D49A7C;
  --c-accent-deep: #D49A7C;

  --c-line: rgba(237, 229, 220, .14);
  --c-overlay: rgba(10, 8, 6, .55);
  --c-whatsapp-ink: #25D366;
  --c-focus: #D49A7C;
  --c-header-solid: rgba(28, 24, 21, .86);
  --c-shadow: rgba(0, 0, 0, .45);
  --c-frame: #EDE5DC;

  --c-field: #241F1B;
  --c-field-line: #8A7D72;
  --c-error: #F0A08A;

  --mood-maternity: #3A2C26;
  --mood-newborn: #2A2420;
  --mood-baby: #262A24;
  --mood-cakesmash: #352A1F;
}