/*
  Chop Awoof design tokens.
  Colors sampled directly from public/brand/logo-primary.svg and icon.svg.
  See docs/website-plan.md and design-system/chop-awoof/pages/landing.md for the
  full contrast ratio table. Do not use MASTER.md's gaming palette anywhere.

  Hard contrast rules encoded by these tokens:
  - Orange is for fills, illustration and large display text (32px+) only.
    Orange text under 32px on a light background fails AA and must not be used.
  - Buttons on orange-500 fill always use ink text (8.22:1 pass), never white (2.15:1 fail).
  - Green is usable as normal body text / links only at the 700 tier or deeper
    (green-700 on white is 5.46:1, green-500 on white is 2.53:1 and fails).
  - White text on a green-700 fill passes (5.40:1).
*/

:root {
  /* ---- Orange scale (brand core #F99A01) ---- */
  --color-orange-50: #FFF6E6;
  --color-orange-100: #FFE9C2;
  --color-orange-200: #FFD793;
  --color-orange-300: #FFC15F;
  --color-orange-400: #FDAD30;
  --color-orange-500: #F99A01; /* brand core, fills/illustration/large display only */
  --color-orange-600: #F2800A;
  --color-orange-700: #ED5400; /* AA pass at 3:1 for large text (3.58:1) */
  --color-orange-800: #C9430A;
  --color-orange-900: #9B3407;

  /* ---- Green scale (brand core #65DB37) ---- */
  --color-green-50: #EFFCE9;
  --color-green-100: #D8F7C9;
  --color-green-200: #B4EF9B;
  --color-green-300: #8FE56D;
  --color-green-400: #74DE4C;
  --color-green-500: #65DB37; /* brand core, fills/illustration only, fails AA as text */
  --color-green-600: #45C522;
  --color-green-700: #1E7A0F; /* AA pass for normal text at 5.46:1 */
  --color-green-800: #175E0C;
  --color-green-900: #0F4408;

  /* ---- Ink (warm near-black, from logo outline details) ---- */
  --color-ink-900: #2E0D01;
  --color-ink-800: #44190A;
  --color-ink-700: #5B2514;
  --color-ink-600: #78392A;

  /* ---- Warm neutral scale (background, never cold grey) ---- */
  --color-neutral-0: #FFFFFF;
  --color-neutral-25: #FDFEFD;
  --color-neutral-50: #FBF6EF;
  --color-neutral-100: #F6EEE2;
  --color-neutral-200: #EDE1CE;
  --color-neutral-300: #DECBAE;
  --color-neutral-400: #C3AC8B;
  --color-neutral-500: #A08B6C;
  --color-neutral-600: #7A6952;
  --color-neutral-700: #5A4C3A;
  --color-neutral-800: #3C3224;
  --color-neutral-900: #241D14;

  /* ---- Semantic colors ---- */
  --color-bg: var(--color-neutral-25);
  --color-bg-alt: var(--color-neutral-50);
  --color-bg-card: var(--color-neutral-0);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-neutral-700);
  --color-border: var(--color-neutral-200);
  --color-focus-ring: var(--color-ink-900);
  --color-link: var(--color-green-700);
  --color-link-hover: var(--color-green-800);
  --color-error: #B3261E;
  --color-error-bg: #FBEAE8;
  --color-success-bg: var(--color-green-50);

  /* Button fills + required text pairing (never deviate, see contrast table) */
  --button-primary-bg: var(--color-orange-500);
  --button-primary-bg-hover: var(--color-orange-600);
  --button-primary-text: var(--color-ink-900);
  --button-secondary-bg: var(--color-green-700);
  --button-secondary-bg-hover: var(--color-green-800);
  --button-secondary-text: var(--color-neutral-0);
  --button-ghost-text: var(--color-ink-900);
  --button-ghost-border: var(--color-ink-900);

  /* ---- Typography ---- */
  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;

  --fs-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --fs-sm: clamp(0.88rem, 0.86rem + 0.1vw, 0.95rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-md: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  --fs-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --fs-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --fs-3xl: clamp(2.4rem, 2rem + 2.2vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  /* ---- Radii (chunky, rounded brand shapes) ---- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 6px rgba(46, 13, 1, 0.08);
  --shadow-md: 0 8px 24px rgba(46, 13, 1, 0.12);
  --shadow-lg: 0 16px 40px rgba(46, 13, 1, 0.16);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Layout ---- */
  --container-max: 72rem;
  --container-gutter: 1.25rem;
  --touch-target-min: 44px;
}