/* ============================================================================
   KATHÉRA® — Design Tokens
   Derived from KATHÉRA® Brand Guidelines (Colour Palette p.32–34, Typography
   p.35–43). Every value here traces back to the brand book; nothing invented.
   ========================================================================== */

:root {
  /* --- Core palette -------------------------------------------------------
     Pantone references and hex values are taken verbatim from the Core
     Palette page. These four are the foundation colours and must always be
     present in brand communications. */

  --kth-color-forest: #295135;        /* Pantone 350 C  — primary brand green */
  --kth-color-anthracite: #24272A;    /* Pantone 426 C  — text & dark surfaces */
  --kth-color-sand: #D6D1C4;          /* Pantone 5727 C — warm neutral */
  --kth-color-offwhite: #FAFAFA;      /* Off White      — page ground */
  --kth-color-white: #FFFFFF;
  --kth-color-black: #000000;

  /* --- Tints (80 / 60 / 40 / 20 %) ---------------------------------------
     Linear mixes toward white, exactly as printed on the Core Palette page. */

  --kth-color-forest-80: #53735C;
  --kth-color-forest-60: #7E9685;
  --kth-color-forest-40: #AABAAF;
  --kth-color-forest-20: #D5DDD7;

  --kth-color-anthracite-80: #4F5153;
  --kth-color-anthracite-60: #7B7C7E;
  --kth-color-anthracite-40: #A8A9AA;
  --kth-color-anthracite-20: #D4D5D5;

  --kth-color-sand-80: #DDD9CF;
  --kth-color-sand-60: #E5E2DB;
  --kth-color-sand-40: #EFEDE8;
  --kth-color-sand-20: #F7F6F3;

  /* Deepened forest for hover/pressed states on green surfaces. */
  --kth-color-forest-deep: #1D3A26;

  /* --- Semantic surfaces & ink -------------------------------------------- */

  --kth-bg: var(--kth-color-offwhite);
  --kth-bg-raised: var(--kth-color-white);
  --kth-bg-sand: var(--kth-color-sand-20);
  --kth-bg-sand-strong: var(--kth-color-sand);
  --kth-bg-forest: var(--kth-color-forest);
  --kth-bg-anthracite: var(--kth-color-anthracite);

  --kth-ink: var(--kth-color-anthracite);
  --kth-ink-muted: var(--kth-color-anthracite-60);
  --kth-ink-subtle: var(--kth-color-anthracite-40);
  --kth-ink-brand: var(--kth-color-forest);
  --kth-ink-inverse: var(--kth-color-offwhite);
  --kth-ink-inverse-muted: rgba(250, 250, 250, 0.72);

  --kth-border: var(--kth-color-anthracite-20);
  --kth-border-strong: var(--kth-color-anthracite-40);
  --kth-border-sand: var(--kth-color-sand);
  --kth-border-brand: var(--kth-color-forest);
  --kth-border-inverse: rgba(250, 250, 250, 0.28);

  /* --- Feedback -----------------------------------------------------------
     Kept inside the brand's natural register: success is the brand green,
     the rest are muted earth tones rather than saturated UI colours. */

  --kth-color-success: var(--kth-color-forest);
  --kth-color-success-bg: var(--kth-color-forest-20);
  --kth-color-warning: #8A6A2F;
  --kth-color-warning-bg: #F4EEE1;
  --kth-color-danger: #8C3A2E;
  --kth-color-danger-bg: #F6E9E6;
  --kth-color-info: var(--kth-color-anthracite-80);
  --kth-color-info-bg: var(--kth-color-anthracite-20);

  /* --- Typography ---------------------------------------------------------
     Lora       → subheadings & intro paragraphs; italic for minor headings (p.39–40)
     Raleway    → body text, captions, UI (p.41–42) */

  --kth-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --kth-font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --kth-font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --kth-text-display: 4.5rem;   /* 72px — hero statements */
  --kth-text-h1: 3rem;          /* 48px — H1 / MAIN HEADING */
  --kth-text-h2: 2rem;          /* 32px — H2 / Subheading */
  --kth-text-h3: 1.375rem;      /* 22px — H3 / Minor Heading */
  --kth-text-lg: 1.125rem;      /* 18px — intro paragraph */
  --kth-text-base: 1rem;        /* 16px — body */
  --kth-text-sm: 0.875rem;      /* 14px — secondary body, UI */
  --kth-text-xs: 0.75rem;       /* 12px — caption / small print */
  --kth-text-eyebrow: 0.6875rem;/* 11px — tracked uppercase label */

  --kth-weight-light: 300;
  --kth-weight-regular: 400;
  --kth-weight-medium: 500;
  --kth-weight-semibold: 600;
  --kth-weight-bold: 700;

  --kth-leading-tight: 1.1;
  --kth-leading-snug: 1.25;
  --kth-leading-normal: 1.5;
  --kth-leading-relaxed: 1.7;

  /* Generous tracking on caps is a signature of the identity — the wordmark,
     the tagline and every section divider in the brand book are letterspaced. */
  /* Button label voice. Set transform to `uppercase` and tracking to
     `var(--kth-tracking-wide)` to go back to the formal, tracked-caps CTA. */
  --kth-button-transform: none;
  --kth-button-tracking: 0.01em;
  --kth-button-weight: 500;

  --kth-tracking-tight: -0.01em;
  --kth-tracking-normal: 0;
  --kth-tracking-wide: 0.08em;
  --kth-tracking-wider: 0.18em;
  --kth-tracking-widest: 0.32em;

  /* --- Space (4px base) --------------------------------------------------- */

  --kth-space-1: 0.25rem;   /*  4px */
  --kth-space-2: 0.5rem;    /*  8px */
  --kth-space-3: 0.75rem;   /* 12px */
  --kth-space-4: 1rem;      /* 16px */
  --kth-space-5: 1.25rem;   /* 20px */
  --kth-space-6: 1.5rem;    /* 24px */
  --kth-space-8: 2rem;      /* 32px */
  --kth-space-10: 2.5rem;   /* 40px */
  --kth-space-12: 3rem;     /* 48px */
  --kth-space-16: 4rem;     /* 64px */
  --kth-space-20: 5rem;     /* 80px */
  --kth-space-24: 6rem;     /* 96px */
  --kth-space-32: 8rem;     /* 128px */

  /* --- Radii --------------------------------------------------------------
     Restrained by design. The identity is built on straight edges and clean
     rectangles; rounding is a whisper, never a statement. */

  --kth-radius-none: 0;
  --kth-radius-sm: 6px;
  --kth-radius-md: 10px;
  --kth-radius-lg: 16px;
  --kth-radius-xl: 24px;
  --kth-radius-pill: 999px;

  /* Interactive elements carry the roundness; surfaces stay only softened.
     Curvature reads as warmth and approachability — the "Gentle" and
     "Conscious care" values made geometric. Change these two to retune the
     whole system's CTA language in one place. */
  --kth-radius-control: var(--kth-radius-pill);
  --kth-radius-surface: var(--kth-radius-md);

  /* --- Elevation ----------------------------------------------------------
     Barely-there shadows. Depth comes from tone and space, not drama. */

  --kth-shadow-sm: 0 1px 2px rgba(36, 39, 42, 0.06);
  --kth-shadow-md: 0 4px 16px rgba(36, 39, 42, 0.08);
  --kth-shadow-lg: 0 12px 40px rgba(36, 39, 42, 0.10);

  /* --- Borders & focus ----------------------------------------------------- */

  --kth-border-width: 1px;
  --kth-focus-ring: 0 0 0 2px var(--kth-color-offwhite), 0 0 0 4px var(--kth-color-forest);
  --kth-focus-ring-inverse: 0 0 0 2px var(--kth-color-forest), 0 0 0 4px var(--kth-color-offwhite);

  /* --- Motion --------------------------------------------------------------
     "Calm & refined" in the tone of voice applies to movement too: short,
     eased, never bouncy. */

  --kth-duration-fast: 120ms;
  --kth-duration-base: 200ms;
  --kth-duration-slow: 320ms;
  --kth-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout --------------------------------------------------------------- */

  --kth-container-sm: 42rem;   /*  672px — editorial measure */
  --kth-container-md: 60rem;   /*  960px */
  --kth-container-lg: 75rem;   /* 1200px — default page width */
  --kth-container-xl: 90rem;   /* 1440px */
  --kth-measure: 68ch;         /* comfortable reading length */
}

/* ---------------------------------------------------------------------------
   Dark ground
   Not a "dark mode" — the brand's own inverse surface. Deep forest green and
   anthracite are first-class KATHÉRA® grounds (packaging, dividers, the site
   footer), so any subtree can opt into them.
   ------------------------------------------------------------------------- */

[data-kth-tone='forest'],
[data-kth-tone='anthracite'] {
  --kth-bg: var(--kth-color-forest);
  --kth-bg-raised: var(--kth-color-forest-deep);
  --kth-bg-sand: rgba(250, 250, 250, 0.06);
  --kth-bg-sand-strong: rgba(250, 250, 250, 0.12);

  --kth-ink: var(--kth-color-offwhite);
  --kth-ink-muted: rgba(250, 250, 250, 0.72);
  --kth-ink-subtle: rgba(250, 250, 250, 0.52);
  --kth-ink-brand: var(--kth-color-offwhite);
  --kth-ink-inverse: var(--kth-color-forest);

  --kth-border: rgba(250, 250, 250, 0.24);
  --kth-border-strong: rgba(250, 250, 250, 0.44);
  --kth-border-sand: rgba(250, 250, 250, 0.24);
  --kth-border-brand: var(--kth-color-offwhite);

  color: var(--kth-ink);
  background-color: var(--kth-bg);
}

[data-kth-tone='anthracite'] {
  --kth-bg: var(--kth-color-anthracite);
  --kth-bg-raised: #2E3236;
  --kth-ink-inverse: var(--kth-color-anthracite);
}

[data-kth-tone='sand'] {
  --kth-bg: var(--kth-color-sand-20);
  --kth-bg-raised: var(--kth-color-white);
  --kth-bg-sand: var(--kth-color-sand-40);
  --kth-bg-sand-strong: var(--kth-color-sand);
  --kth-border: var(--kth-color-sand);
  color: var(--kth-ink);
  background-color: var(--kth-bg);
}