/*
 * Daroha website design tokens.
 *
 * Colour, spacing, radius, shadow and motion values are copied from the app's
 * constants/ (colors.ts, spacing.ts, animation.ts) and must stay in sync with
 * them. The type scale is web-only: the app ships six mobile text styles, and a
 * marketing page needs display sizes the app has no use for.
 */

:root {
  /* ── Text ────────────────────────────────────────────────── */
  --text: #1a1714;
  --text-2: #564e46;
  --text-3: #9c9388;
  --text-4: #aca7a0;

  /* ── Surfaces ────────────────────────────────────────────── */
  --bg: #f0ede8;
  --bg-mid: rgba(240, 237, 232, 0.4);
  --card: #ffffff;
  --card-mid: rgba(255, 255, 255, 0.4);
  --card-hard: rgba(255, 255, 255, 0.7);
  --card-2: rgba(26, 23, 20, 0.05);

  /* ── Accent ──────────────────────────────────────────────── */
  --accent: #a96039;
  --accent-mid: rgba(169, 96, 57, 0.18);
  --accent-soft: rgba(169, 96, 57, 0.1);
  --accent-edit: #b8704a;
  --accent-mid-plain: #e3d3c8;

  /* ── Semantic ────────────────────────────────────────────── */
  --amber: #a56b00;
  --amber-soft: rgba(165, 107, 0, 0.1);
  --red: #c63e2f;
  --red-soft: rgba(198, 62, 47, 0.1);
  --green: #188b59;
  --green-soft: rgba(24, 139, 89, 0.1);

  /* ── Dark block (app header / numpad gradient) ───────────── */
  --gradient-start: #30221b;
  --gradient-finish: #4a3020;
  /* Text colours for use on the dark block. */
  --on-dark: #f0ede8;
  --on-dark-2: rgba(240, 237, 232, 0.72);
  --on-dark-3: rgba(240, 237, 232, 0.5);
  --on-dark-card: rgba(255, 255, 255, 0.07);
  --on-dark-border: rgba(240, 237, 232, 0.14);

  /* ── Typography ──────────────────────────────────────────── */
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  --weight-body: 600;
  --weight-strong: 800;
  --weight-display: 900;

  /* Fluid display sizes: mobile floor → desktop ceiling. */
  --size-display: clamp(2.5rem, 1.6rem + 4.5vw, 4rem); /* 40 → 64 */
  --size-h2: clamp(2rem, 1.5rem + 2.5vw, 2.5rem); /* 32 → 40 */
  --size-h3: 1.5rem; /* 24 */
  --size-body-lg: 1.1875rem; /* 19 */
  --size-body: 1.0625rem; /* 17 */
  --size-caption: 0.8125rem; /* 13 */

  --lh-display: 1.05;
  --lh-heading: 1.12;
  --lh-body: 1.55;
  --ls-display: -0.02em;
  --ls-eyebrow: 0.08em;

  /* ── Spacing (app Padding / Gap scale) ───────────────────── */
  --p-1: 7px;
  --p-2: 11px;
  --p-3: 14px;
  --p-4: 16px;
  --p-5: 20px;
  --p-6: 28px;
  --gap-1: 7px;
  --gap-2: 14px;
  --gap-3: 21px;

  /* Section rhythm — web-only, larger than any in-app gap. */
  --section-y: clamp(4rem, 2rem + 8vw, 7.5rem);
  --block-y: clamp(2rem, 1rem + 4vw, 3.5rem);

  /* ── Radius ──────────────────────────────────────────────── */
  --r-1: 20px;
  --r-2: 16px;
  --r-3: 21px;
  --r-4: 35px;
  --r-pill: 9999px;

  /* ── Elevation (Figma Shadow-1) ──────────────────────────── */
  --shadow-1: 0 1px 2px rgba(28, 25, 22, 0.04),
    0 2px 6px rgba(28, 25, 22, 0.04), 0 6px 20px rgba(28, 25, 22, 0.05);
  /* Lifted variant for floating tiles; same hue, longer throw. */
  --shadow-2: 0 2px 4px rgba(28, 25, 22, 0.05),
    0 8px 16px rgba(28, 25, 22, 0.06), 0 20px 40px rgba(28, 25, 22, 0.08);

  /* ── Layout ──────────────────────────────────────────────── */
  --container: 1120px;
  --container-narrow: 720px;
  --gutter: 16px;
  --nav-h: 64px;

  /* ── Motion (app Animation / Easings) ────────────────────── */
  --t-press: 100ms;
  --t-micro: 200ms;
  --t-transition: 300ms;
  --t-page: 500ms;
  --ease-decelerate: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-standard: cubic-bezier(0.645, 0.045, 0.355, 1);
  --press-scale: 0.97;
}