/* One More Kulfi: design tokens.
 * Palette sampled from the supplied logo (BRIEF.md), converted to OKLCH.
 * Every colour, font, size and timing in styles.css comes from here.
 */

@font-face {
  font-family: "Baloo Thambi 2";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/baloo-thambi-2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo Thambi 2";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("assets/fonts/baloo-thambi-2-tamil.woff2") format("woff2");
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Fonts. Baloo Thambi 2 covers Latin + Tamil (and the rupee sign), so it
     sits second in the body stack to catch any ₹ or Tamil glyph. */
  --font-display: "Baloo Thambi 2", "Noto Sans Tamil", "Tamil Sangam MN", ui-rounded, sans-serif;
  --font-body: "Figtree", "Baloo Thambi 2", "Noto Sans Tamil", ui-sans-serif, sans-serif;

  /* Night Cart (draft B, the owner's pick): deep maroon base, cream ink,
     gold accent. Dark only. */
  --color-paper:      oklch(19.3% 0.070 26.9); /* deep maroon #2D0303 */
  --color-paper-2:    oklch(23.5% 0.085 27);
  --color-card:       oklch(25.5% 0.095 27);
  --color-card-alt:   oklch(30.7% 0.110 27.7); /* maroon #5B0D0B */
  --color-cream:      oklch(91.7% 0.079 87.3); /* malai cream #FAE1A7, speech bubble */
  --color-on-cream:   oklch(19.3% 0.070 26.9);
  --color-ink:        oklch(93% 0.050 87);      /* 15.2:1 on paper */
  --color-ink-2:      oklch(82% 0.060 80);      /* 10.6:1 on paper, 7.9:1 on maroon */
  --color-line:       oklch(41% 0.110 30);
  --color-shadow:     oklch(12% 0.045 27);
  --color-accent:     oklch(80% 0.125 81);      /* KULFI gold #E5B14E */
  --color-on-accent:  oklch(19.3% 0.070 26.9);  /* 9.5:1 */
  --color-inverse:    oklch(91.7% 0.079 87.3);
  --color-on-inverse: oklch(19.3% 0.070 26.9);
  --color-todo-line:  oklch(80% 0.125 81);
  --color-focus:      oklch(84% 0.140 81);
  --color-glow:       oklch(36% 0.100 42 / 0.55); /* warm cart-lamp glow behind the hero */

  /* Type: major-third steps, five sizes on the page. */
  --text-sm:      0.875rem;
  --text-base:    1.0625rem;
  --text-lg:      1.3125rem;
  --text-h3:      clamp(1.5rem, 1.5vw + 1.1rem, 2rem);
  --text-h2:      clamp(2.125rem, 3vw + 1.25rem, 3.5rem);
  --text-display: clamp(2.5rem, 4vw + 1.45rem, 4.75rem);

  /* 4pt spacing scale. */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --page-max:    72rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);

  /* Shape: cards 12px, buttons + chips full pill. */
  --radius-card: 12px;
  --radius-pill: 999px;
  --rule-sticker: 3px;
  --rule-dash:    2px;
  --shadow-sticker:    4px 4px 0 var(--color-shadow);
  --shadow-sticker-lg: 6px 6px 0 var(--color-shadow);

  /* Motion. */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-wiggle: 640ms;

  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
}