/* KITAVI foundations. Reusable custom properties for the approved brand. */
:root {
  --ds-primary-50: #fbf7ed;
  --ds-primary-100: #f5ead3;
  --ds-primary-200: #ead6aa;
  --ds-primary-300: #dbba73;
  --ds-primary-400: #caa14d;
  --ds-primary-500: #b98a2e;
  --ds-primary-600: #9b7022;
  --ds-primary-700: #76521a;
  --ds-primary-800: #563b15;
  --ds-primary-900: #3a280f;

  --ds-neutral-50: #f8f8f7;
  --ds-neutral-100: #edeeed;
  --ds-neutral-200: #dadcdb;
  --ds-neutral-300: #c0c3c2;
  --ds-neutral-400: #969b9c;
  --ds-neutral-500: #747b7d;
  --ds-neutral-600: #575d60;
  --ds-neutral-700: #3a3f44;
  --ds-neutral-800: #2b3034;
  --ds-neutral-900: #1c2023;

  --ds-cream: #f6f3ec;
  --ds-white: #fff;
  --ds-canvas: var(--ds-cream);
  --ds-surface: var(--ds-white);
  --ds-ink: var(--ds-neutral-700);
  --ds-muted: var(--ds-neutral-600);
  --ds-line: #d9d3c8;
  --ds-control-line: var(--ds-neutral-500);
  --ds-action: var(--ds-primary-500);
  --ds-action-hover: var(--ds-primary-400);
  --ds-on-action: var(--ds-neutral-900);
  --ds-focus: var(--ds-neutral-900);
  --ds-focus-on-dark: var(--ds-cream);

  --ds-success-bg: #e6f4ec;
  --ds-success-ink: #20513a;
  --ds-success-border: #51836b;
  --ds-warning-bg: #fff2d6;
  --ds-warning-ink: #69460d;
  --ds-warning-border: #9e721f;
  --ds-error-bg: #fdeceb;
  --ds-error-ink: #842d29;
  --ds-error-border: #af574f;

  --ds-font: "Be Vietnam Pro", system-ui, sans-serif;
  --ds-type-display: clamp(2.5rem, 1.76rem + 3.25vw, 5rem);
  --ds-type-h1: clamp(2.125rem, 1.58rem + 2.25vw, 3.75rem);
  --ds-type-h2: clamp(1.75rem, 1.32rem + 1.75vw, 3rem);
  --ds-type-h3: clamp(1.375rem, 1.15rem + .9vw, 2rem);
  --ds-type-h4: clamp(1.125rem, .99rem + .52vw, 1.5rem);
  --ds-type-body: clamp(1rem, .965rem + .16vw, 1.125rem);
  --ds-type-caption: clamp(.8125rem, .77rem + .17vw, .9375rem);
  --ds-leading-display: 1.08;
  --ds-leading-heading: 1.2;
  --ds-leading-body: 1.65;
  --ds-tracking-tight: -.04em;
  --ds-tracking-heading: -.025em;
  --ds-tracking-label: .065em;

  /* Base unit = 8px at the standard 16px root size. */
  --ds-space-1: .5rem;
  --ds-space-2: 1rem;
  --ds-space-3: 1.5rem;
  --ds-space-4: 2rem;
  --ds-space-5: 2.5rem;
  --ds-space-6: 3rem;
  --ds-space-7: 3.5rem;
  --ds-space-8: 4rem;
  --ds-space-10: 5rem;
  --ds-space-12: 6rem;
  --ds-space-16: 8rem;
  --ds-container: 80rem;
  --ds-gutter: clamp(var(--ds-space-2), 3.5vw, var(--ds-space-5));
  --ds-grid-columns: 12;
  --ds-grid-gap: clamp(var(--ds-space-2), 2vw, var(--ds-space-3));
  --ds-touch-target: 3rem;

  --ds-radius-sm: .375rem;
  --ds-radius-md: .625rem;
  --ds-radius-lg: 1rem;
  --ds-radius-pill: 999px;
  --ds-shadow-1: 0 2px 5px rgb(28 32 35 / .07), 0 1px 2px rgb(28 32 35 / .04);
  --ds-shadow-2: 0 9px 24px rgb(28 32 35 / .10), 0 2px 5px rgb(28 32 35 / .05);
  --ds-shadow-3: 0 22px 54px rgb(28 32 35 / .18), 0 5px 12px rgb(28 32 35 / .08);
  --ds-motion-fast: 120ms;
  --ds-motion-standard: 200ms;
  --ds-motion-slow: 320ms;
  --ds-ease: cubic-bezier(.2, .75, .25, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-fast: 0ms;
    --ds-motion-standard: 0ms;
    --ds-motion-slow: 0ms;
  }
}