/* ==========================================================================
   Chitthi — Darsh Pallace design system
   Tokens: colour, type, space, motion, texture.
   Extends the site theme (Cormorant Garamond + Jost, brand navy & gold)
   with a Rajasthani scrapbook palette.
   ========================================================================== */


:root {
  /* — Paper & surfaces — */
  --paper:        #F3E9D6;  /* cotton rag */
  --paper-2:      #EADCC2;  /* aged fold */
  --paper-3:      #DCC7A2;  /* tea stain */
  --kraft:        #C49A6C;
  --cork:         #A8784B;
  --cork-deep:    #7E5532;
  --photo-white:  #FBF7EE;  /* polaroid border */

  /* — Rajasthani pigments — */
  --gulabi:       #D8806A;  /* pink city sandstone */
  --terracotta:   #B9573C;
  --sindoor:      #B1261C;  /* vermilion, wax seal */
  --haldi:        #E5A031;  /* marigold / turmeric */
  --kesar:        #EF7F1A;  /* saffron */
  --peacock:      #1D6B68;
  --neel:         #1F3366;  /* indigo dye */
  --henna:        #6E3424;
  --gold:         #C9A45C;  /* brand gold */
  --gold-light:   #E6CB8E;
  --navy:         #12264A;  /* brand navy */
  --navy-deep:    #0B1A35;

  /* — Ink — */
  --ink:          #2B2018;  /* sepia ink */
  --ink-soft:     #5A4636;
  --ink-faint:    #8C765F;
  --on-dark:      #F6EBD4;

  /* — Semantic — */
  --bg:           var(--paper);
  --text:         var(--ink);
  --muted:        var(--ink-soft);
  --accent:       var(--sindoor);
  --accent-2:     var(--haldi);
  --rule:         color-mix(in srgb, var(--ink) 22%, transparent);

  /* — Type — */
  --font-display: 'CormorantGaramond', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:    'Kalam', 'Segoe Print', cursive;                 /* notes, captions — Latin + देवनागरी */
  --font-deva:    'Tiro Devanagari Hindi', 'Kohinoor Devanagari', serif; /* chapter marks */

  --fs-eyebrow:   0.75rem;
  --fs-small:     0.875rem;
  --fs-body:      1.0625rem;
  --fs-lead:      clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --fs-hand:      clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --fs-h3:        clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --fs-h2:        clamp(2.3rem, 1.5rem + 3.4vw, 4.6rem);
  --fs-h1:        clamp(3rem, 1.6rem + 6.5vw, 8rem);
  --fs-deva:      clamp(3.5rem, 2rem + 8vw, 10rem);

  --track-eyebrow: 0.32em;

  /* — Space — */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1.25rem;
  --s-4: clamp(1.75rem, 3vw, 2.5rem);
  --s-5: clamp(3rem, 6vw, 5rem);
  --s-6: clamp(4.5rem, 10vw, 9rem);
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 34rem;

  /* — Shape & depth — */
  --radius-card: 3px;
  --shadow-paper: 0 1px 1px rgba(43,32,24,.12), 0 6px 14px -4px rgba(43,32,24,.28), 0 22px 40px -18px rgba(43,32,24,.35);
  --shadow-lift:  0 2px 2px rgba(43,32,24,.14), 0 18px 30px -8px rgba(43,32,24,.38), 0 40px 70px -30px rgba(43,32,24,.45);
  --shadow-pin:   1px 2px 2px rgba(0,0,0,.35);

  /* — Motion — */
  --ease-paper:   cubic-bezier(.2, .8, .2, 1);   /* settles like paper landing */
  --ease-ink:     cubic-bezier(.65, 0, .35, 1);  /* brush strokes */
  --dur-quick:    .25s;
  --dur-base:     .6s;
  --dur-slow:     1.2s;

  /* — Texture (SVG noise) — */
  --paper-img: url('../img/paper.webp');
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .09 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cork-speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .14 0 0 0 0 .06 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* The story is a paper object: it keeps its daylight palette in dark mode,
   but softens the page edge around it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --edge: #1a130d; }
}
:root[data-theme="dark"] { --edge: #1a130d; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-quick: 0s; --dur-base: 0s; --dur-slow: 0s; }
}