/* tokens.css: the only file that defines the Usman Jewellers brand.
   One dark theme. Emerald-black base, green surfaces, cream type, crimson as the single accent (fills only).
   Sign blue and logo green exist only for the cream signboard and the crest, as in the real logo. */

:root {
  color-scheme: dark;

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --font-body: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 5.6vw, 5.25rem);
  --fs-h2: clamp(2.2rem, 4.6vw, 4.25rem);
  --fs-h3: clamp(1.9rem, 3vw, 3rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --tracking-display: -0.02em;
  --leading-display: 1.02;

  --ink: #072419;
  --green: #0C3324;
  --green-2: #14452F;
  --ivory: #F6F0D6;
  --ivory-dim: rgb(246 240 214 / 0.7);
  --crimson: #C0262D;
  --sign-blue: #2D4A9E;
  --logo-green: #1F7A3C;

  --bg: var(--ink);
  --bg-elevated: var(--green);
  --bg-muted: var(--green);
  --text: var(--ivory);
  --text-muted: var(--ivory-dim);
  --line: rgb(246 240 214 / 0.3);
  --line-soft: rgb(246 240 214 / 0.18);
  --accent: var(--crimson);
  --accent-contrast: var(--ivory);
  --focus: 0 0 0 2px var(--ink), 0 0 0 4px var(--ivory);

  /* Shape lock: radius 0 everywhere. */
  --radius-card: 0;
  --radius-input: 0;
  --radius-button: 0;

  --section-y: clamp(6rem, 12vw, 12rem);
  --gutter: clamp(1rem, 3vw, 2rem);
  --container: 1320px;
  --nav-h: 72px;
  --bar-h: 60px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.45s;

  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 40;
  --z-overlay: 60;
  --z-grain: 80;
}