/* Design tokens, in the Open Props idiom: a small, hand-picked set of custom
   properties rather than a whole imported library. Everything the app needs is
   here, nothing it does not.

   Colors are authored in OKLCH so that lightness steps are perceptually even
   -- a ramp built this way stays legible at every step, which the equivalent
   HSL ramp does not. */

:root {
  /* ---- brand ------------------------------------------------------------ */
  /* A single berry hue carries the whole identity. Shifting --brand-hue
     re-themes the entire application. */
  --brand-hue: 344;
  --brand-chroma: 0.16;

  --brand-1: oklch(0.97 0.02 var(--brand-hue));
  --brand-2: oklch(0.92 0.05 var(--brand-hue));
  --brand-3: oklch(0.82 0.1 var(--brand-hue));
  --brand-5: oklch(0.62 var(--brand-chroma) var(--brand-hue));
  --brand-6: oklch(0.55 var(--brand-chroma) var(--brand-hue));
  --brand-7: oklch(0.48 0.15 var(--brand-hue));
  --brand-9: oklch(0.32 0.1 var(--brand-hue));

  /* ---- neutrals --------------------------------------------------------- */
  /* Warm-tinted grays. A hint of the brand hue in the neutrals is what keeps
     the page from looking clinical. */
  --gray-0: oklch(0.995 0.003 var(--brand-hue));
  --gray-1: oklch(0.975 0.005 var(--brand-hue));
  --gray-2: oklch(0.945 0.007 var(--brand-hue));
  --gray-3: oklch(0.9 0.008 var(--brand-hue));
  --gray-4: oklch(0.82 0.009 var(--brand-hue));
  --gray-5: oklch(0.68 0.01 var(--brand-hue));
  --gray-6: oklch(0.56 0.012 var(--brand-hue));
  --gray-7: oklch(0.44 0.012 var(--brand-hue));
  --gray-8: oklch(0.33 0.012 var(--brand-hue));
  --gray-9: oklch(0.24 0.012 var(--brand-hue));
  --gray-10: oklch(0.17 0.012 var(--brand-hue));
  --gray-11: oklch(0.13 0.01 var(--brand-hue));

  /* ---- status ----------------------------------------------------------- */
  --green-5: oklch(0.62 0.14 150);
  --green-7: oklch(0.48 0.13 150);
  --green-1: oklch(0.95 0.04 150);

  --amber-5: oklch(0.75 0.14 75);
  --amber-1: oklch(0.96 0.05 75);

  --red-5: oklch(0.6 0.19 25);
  --red-7: oklch(0.5 0.18 25);
  --red-1: oklch(0.95 0.03 25);

  /* ---- spacing ---------------------------------------------------------- */
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 0.75rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 2rem;
  --size-8: 2.5rem;
  --size-9: 3rem;
  --size-10: 4rem;
  --size-12: 6rem;

  /* ---- radii ------------------------------------------------------------ */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-5: 24px;
  --radius-round: 999px;

  /* ---- type ------------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --font-size-0: 0.75rem;
  --font-size-1: 0.8125rem;
  --font-size-2: 0.875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.125rem;
  --font-size-5: 1.375rem;
  --font-size-6: 1.75rem;
  --font-size-7: 2.25rem;
  --font-size-8: 3rem;

  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;

  --line-tight: 1.2;
  --line-snug: 1.4;
  --line-normal: 1.6;

  /* ---- motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --speed-1: 120ms;
  --speed-2: 200ms;
  --speed-3: 320ms;

  /* ---- layout ----------------------------------------------------------- */
  --page-max: 62rem;
  --page-narrow: 40rem;
  --header-height: 4rem;
}

/* ---- semantic aliases: light ------------------------------------------- */
:root {
  --bg: var(--gray-1);
  --bg-raised: var(--gray-0);
  --bg-sunken: var(--gray-2);
  --bg-hover: var(--gray-2);

  --text: var(--gray-10);
  --text-muted: var(--gray-6);
  --text-subtle: var(--gray-5);
  --text-on-brand: white;

  --border: var(--gray-3);
  --border-strong: var(--gray-4);

  --accent: var(--brand-6);
  --accent-hover: var(--brand-7);
  --accent-soft: var(--brand-1);
  --accent-text: var(--brand-7);

  --success: var(--green-7);
  --success-soft: var(--green-1);
  --warning-soft: var(--amber-1);
  --warning-text: oklch(0.45 0.12 75);
  --danger: var(--red-7);
  --danger-soft: var(--red-1);

  --shadow-1: 0 1px 2px oklch(0.2 0.02 var(--brand-hue) / 0.06),
    0 1px 3px oklch(0.2 0.02 var(--brand-hue) / 0.04);
  --shadow-2: 0 2px 4px oklch(0.2 0.02 var(--brand-hue) / 0.05),
    0 4px 12px oklch(0.2 0.02 var(--brand-hue) / 0.07);
  --shadow-3: 0 8px 24px oklch(0.2 0.02 var(--brand-hue) / 0.12),
    0 2px 8px oklch(0.2 0.02 var(--brand-hue) / 0.08);

  --ring: 0 0 0 3px oklch(0.62 0.16 var(--brand-hue) / 0.35);
}

/* ---- semantic aliases: dark -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--gray-11);
    --bg-raised: var(--gray-10);
    --bg-sunken: oklch(0.1 0.01 var(--brand-hue));
    --bg-hover: var(--gray-9);

    --text: var(--gray-1);
    --text-muted: var(--gray-5);
    --text-subtle: var(--gray-6);

    --border: oklch(0.26 0.012 var(--brand-hue));
    --border-strong: oklch(0.34 0.014 var(--brand-hue));

    --accent: var(--brand-5);
    --accent-hover: var(--brand-3);
    --accent-soft: oklch(0.26 0.05 var(--brand-hue));
    --accent-text: var(--brand-3);

    --success: oklch(0.72 0.14 150);
    --success-soft: oklch(0.26 0.05 150);
    --warning-soft: oklch(0.28 0.05 75);
    --warning-text: oklch(0.82 0.11 75);
    --danger: oklch(0.68 0.17 25);
    --danger-soft: oklch(0.27 0.06 25);

    --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
    --shadow-2: 0 2px 4px oklch(0 0 0 / 0.35), 0 4px 12px oklch(0 0 0 / 0.4);
    --shadow-3: 0 8px 24px oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.4);

    --ring: 0 0 0 3px oklch(0.62 0.16 var(--brand-hue) / 0.45);
  }
}