/* ==========================================================================
   Hunterz — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, space, radius, elevation, motion.

   Palette is anchored on the React Native app (hunterz-app/constants/theme.ts)
   so web and app read as one product: the same #4E8B5B green, #D97728 ochre
   and #F4F5F2 ground, expanded here into full ramps.

   Legacy --hz-* / --hunterz-* names are kept as aliases at the bottom, so
   existing modules keep working while pages migrate one by one.
   ========================================================================== */

/* ── Self-hosted typefaces (SIL OFL 1.1, see fonts/OFL-*.txt) ─────────────── */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope var";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope var";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ══ Colour ramps ══════════════════════════════════════════════════════ */

  /* Neutral — warm stone with a green cast, so it sits under the brand green
     without going cold/grey. 50 and 200 are the app's background and border. */
  --hz-n-0: #ffffff;
  --hz-n-25: #fafbf9;
  --hz-n-50: #f4f5f2;
  --hz-n-100: #eceee9;
  --hz-n-200: #e5e7e1;
  --hz-n-300: #d3d7ce;
  --hz-n-400: #a8aea2;
  --hz-n-500: #7e857a;
  --hz-n-600: #5f665c;
  --hz-n-700: #464c44;
  --hz-n-800: #2e322c;
  --hz-n-900: #1c1f1b;

  /* Brand green — 500 is the app's primary, 800 the app's greenDark. */
  --hz-g-50: #eef3ea;
  --hz-g-100: #dce8d9;
  --hz-g-200: #bcd3b9;
  --hz-g-300: #94b896;
  --hz-g-400: #6ba275;
  --hz-g-500: #4e8b5b;
  --hz-g-600: #3f7049;
  --hz-g-700: #335b3d;
  --hz-g-800: #274b38;
  --hz-g-900: #1c3628;

  /* Ochre accent — 500/600 are the app's orange/orangeDark. */
  --hz-a-50: #fdf3ea;
  --hz-a-100: #f7e4d4;
  --hz-a-200: #efc8a4;
  --hz-a-300: #e5a66f;
  --hz-a-400: #de8c48;
  --hz-a-500: #d97728;
  --hz-a-600: #bc6320;
  --hz-a-700: #97501b;
  --hz-a-800: #733d16;
  --hz-a-900: #4e2a10;

  /* ══ Semantic surfaces & text ═════════════════════════════════════════ */

  --hz-surface-sunken: var(--hz-n-50);
  --hz-surface: var(--hz-n-0);
  --hz-surface-soft: var(--hz-n-25);
  --hz-surface-muted: var(--hz-n-100);
  --hz-surface-brand: var(--hz-g-50);
  --hz-surface-accent: var(--hz-a-50);
  --hz-surface-inverse: var(--hz-g-900);

  --hz-line: var(--hz-n-200);
  --hz-line-strong: var(--hz-n-300);
  --hz-line-brand: var(--hz-g-200);

  --hz-ink: #1b1e1a;
  --hz-ink-soft: var(--hz-n-700);
  --hz-ink-muted: var(--hz-n-500);
  --hz-ink-faint: var(--hz-n-400);
  --hz-ink-inverse: var(--hz-n-0);
  --hz-ink-brand: var(--hz-g-800);
  --hz-ink-accent: var(--hz-a-700);

  /* ══ Status ═══════════════════════════════════════════════════════════ */

  --hz-success: #3f7049;
  --hz-success-soft: #e6f0e6;
  --hz-warning: #c98a15;
  --hz-warning-soft: #fcf2dd;
  --hz-danger: #b04437;
  --hz-danger-soft: #fbeceb;
  --hz-info: #3a6f8f;
  --hz-info-soft: #e9f1f6;

  /* ══ Activity accents (feed / journal / huntdays) ══════════════════════ */

  --hz-accent-hunt: var(--hz-a-500);
  --hz-accent-stalking: #4d8a78;
  --hz-accent-observation: #3a6f8f;
  --hz-accent-training: #7b5ea7;
  --hz-accent-neutral: #8a8f87;

  /* ══ Typography ═══════════════════════════════════════════════════════ */

  --hz-font-ui: "Inter var", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --hz-font-display: "Manrope var", "Inter var", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --hz-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --hz-text-2xs: 0.6875rem; /* 11 */
  --hz-text-xs: 0.75rem; /*    12 */
  --hz-text-sm: 0.8125rem; /*  13 */
  --hz-text-md: 0.875rem; /*   14 */
  --hz-text-base: 0.9375rem; /*15 */
  --hz-text-lg: 1.0625rem; /*  17 */
  --hz-text-xl: 1.25rem; /*    20 */
  --hz-text-2xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --hz-text-3xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --hz-text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

  --hz-weight-normal: 400;
  --hz-weight-medium: 500;
  --hz-weight-semi: 600;
  --hz-weight-bold: 700;
  --hz-weight-black: 800;

  --hz-leading-tight: 1.15;
  --hz-leading-snug: 1.3;
  --hz-leading-normal: 1.55;
  --hz-leading-relaxed: 1.7;

  --hz-tracking-display: -0.03em;
  --hz-tracking-tight: -0.015em;
  --hz-tracking-normal: 0;
  --hz-tracking-wide: 0.04em;
  --hz-tracking-caps: 0.08em;

  /* ══ Space — 4px base ═════════════════════════════════════════════════ */

  --hz-space-1: 4px;
  --hz-space-2: 8px;
  --hz-space-3: 12px;
  --hz-space-4: 16px;
  --hz-space-5: 20px;
  --hz-space-6: 24px;
  --hz-space-7: 28px;
  --hz-space-8: 32px;
  --hz-space-10: 40px;
  --hz-space-12: 48px;
  --hz-space-16: 64px;
  --hz-space-20: 80px;

  /* ══ Radius — related to the app's 22px cards ═════════════════════════ */

  --hz-radius-xs: 6px;
  --hz-radius-sm: 8px;
  --hz-radius-md: 12px;
  --hz-radius-lg: 16px;
  --hz-radius-xl: 20px;
  --hz-radius-2xl: 26px;
  --hz-radius-pill: 999px;

  /* ══ Elevation — green-tinted shadows, never neutral black ════════════ */

  --hz-shadow-color: 28, 54, 40;
  --hz-shadow-xs: 0 1px 2px rgba(var(--hz-shadow-color), 0.06);
  --hz-shadow-sm: 0 1px 2px rgba(var(--hz-shadow-color), 0.05),
    0 2px 6px -1px rgba(var(--hz-shadow-color), 0.06);
  --hz-shadow-md: 0 2px 4px rgba(var(--hz-shadow-color), 0.04),
    0 8px 20px -4px rgba(var(--hz-shadow-color), 0.1);
  --hz-shadow-lg: 0 4px 8px rgba(var(--hz-shadow-color), 0.04),
    0 18px 40px -8px rgba(var(--hz-shadow-color), 0.14);
  --hz-shadow-xl: 0 8px 16px rgba(var(--hz-shadow-color), 0.05),
    0 32px 64px -12px rgba(var(--hz-shadow-color), 0.18);
  --hz-shadow-accent: 0 2px 6px -1px rgba(188, 99, 32, 0.24),
    0 10px 24px -6px rgba(188, 99, 32, 0.32);
  --hz-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ══ Motion ═══════════════════════════════════════════════════════════ */

  --hz-duration-instant: 80ms;
  --hz-duration-fast: 140ms;
  --hz-duration-base: 220ms;
  --hz-duration-slow: 340ms;
  --hz-duration-slower: 520ms;

  /* Decelerating curves: fast start, soft landing. The default for anything
     entering or responding to a pointer. */
  --hz-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --hz-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Symmetric, for things that move between two resting states. */
  --hz-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  /* Slight overshoot — presses, pops, toggles. Use sparingly. */
  --hz-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --hz-transition-colors: color var(--hz-duration-fast) var(--hz-ease-out),
    background-color var(--hz-duration-fast) var(--hz-ease-out),
    border-color var(--hz-duration-fast) var(--hz-ease-out);
  --hz-transition-elevate: transform var(--hz-duration-base) var(--hz-ease-out),
    box-shadow var(--hz-duration-base) var(--hz-ease-out);

  /* ══ Layout ═══════════════════════════════════════════════════════════ */

  --hz-content-max: 1240px;
  --hz-content-narrow: 760px;
  --hz-focus-ring: 0 0 0 3px rgba(78, 139, 91, 0.32);
  --hz-focus-ring-accent: 0 0 0 3px rgba(217, 119, 40, 0.3);

  /* ══════════════════════════════════════════════════════════════════════
     Legacy aliases — every custom property the existing modules reference.
     Remapped onto the ramps above so old CSS inherits the new palette.
     ══════════════════════════════════════════════════════════════════════ */

  --hz-green-dark: var(--hz-g-800);
  --hz-green: var(--hz-g-500);
  --hz-green-mid: var(--hz-g-600);
  --hz-green-soft: var(--hz-g-400);
  --hz-navbar: var(--hz-g-500);
  --hz-navbar-dark: var(--hz-g-800);
  --hz-navbar-light: var(--hz-g-400);

  --hz-bg: var(--hz-n-50);
  --hz-hero-bg: var(--hz-g-50);
  --hz-card: var(--hz-n-0);
  --hz-card-soft: var(--hz-n-25);
  --hz-border: var(--hz-n-200);

  --hz-olive: var(--hz-g-500);
  --hz-olive-soft: var(--hz-g-50);

  --hz-orange: var(--hz-a-500);
  --hz-orange-dark: var(--hz-a-600);
  --hz-orange-soft: var(--hz-a-100);

  --hz-stalking: var(--hz-accent-stalking);
  --hz-observation: var(--hz-accent-observation);
  --hz-training: var(--hz-accent-training);
  --hz-neutral: var(--hz-accent-neutral);

  --hz-text: var(--hz-ink);
  --hz-text-muted: var(--hz-ink-muted);
  --hz-muted: var(--hz-ink-muted);
  --hz-white: var(--hz-n-0);

  --hunterz-green-primary: var(--hz-g-500);
  --hunterz-green-dark: var(--hz-g-800);
  --hunterz-green-secondary: var(--hz-g-400);
  --hunterz-green-light: var(--hz-g-50);
  --hunterz-bg: var(--hz-n-50);
  --hunterz-green: var(--hz-g-500);
  --hunterz-olive: var(--hz-g-500);
  --hunterz-brown: var(--hz-g-800);
  --hunterz-light-brown: var(--hz-g-600);
  --hunterz-light-green: var(--hz-g-400);
  --hunterz-dark-green: var(--hz-g-900);
  --hunterz-orange: var(--hz-a-500);
  --hunterz-sand: var(--hz-n-50);
  --hunterz-sand-soft: var(--hz-g-50);
  --hunterz-gray: var(--hz-n-600);
  --hunterz-light-gray: var(--hz-n-100);
  --hunterz-dark-gray: var(--hz-n-800);

  --hunterz-accent-hunt: var(--hz-accent-hunt);
  --hunterz-accent-stalking: var(--hz-accent-stalking);
  --hunterz-accent-observation: var(--hz-accent-observation);
  --hunterz-accent-training: var(--hz-accent-training);
  --hunterz-accent-neutral: var(--hz-accent-neutral);

  --hunterz-text-primary: var(--hz-ink);
  --hunterz-text-secondary: var(--hz-ink-muted);
  --hunterz-border-light: var(--hz-n-200);
  --text-primary: var(--hz-ink);
  --text-secondary: var(--hz-ink-muted);
  --border-light: var(--hz-n-200);

  --success-color: var(--hz-success);
  --success-color-dark: var(--hz-g-700);
  --warning-color: var(--hz-warning);
  --warning-color-dark: #a06f0f;
  --error-color: var(--hz-danger);
  --error-color-dark: #8d352b;
  --info-color: var(--hz-info);
  --info-color-dark: #2d586f;

  --hunterz-space-1: var(--hz-space-2);
  --hunterz-space-2: var(--hz-space-4);
  --hunterz-space-3: var(--hz-space-6);
  --hunterz-space-4: var(--hz-space-8);
  --hunterz-radius-card: var(--hz-radius-xl);
  --hunterz-content-max: var(--hz-content-max);

  --nav-height: 64px;
}