/*
 * Hands On Rehabilitation - design tokens.
 *
 * Every value here is MEASURED from the source site, not chosen. This file is
 * the single source of truth for the rebuild: no hardcoded hex or px anywhere
 * else in the theme (CLAUDE.md §5, §12).
 */

/* ---------------------------------------------------------------- fonts
 *
 * Khula 400 + 700 ONLY, self-hosted. See CLAUDE.md §6 and the trap in §9:
 * the source CSS asks for font-weight 500, but its Google Fonts request never
 * included a 500 face, so every browser falls back to 400. Shipping a real 500
 * would make all body copy visibly heavier and fail the visual diff.
 *
 * Do not add a 500 face. The fallback IS the design.
 */

@font-face {
  font-family: 'Khula';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/khula-400-latin.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: 'Khula';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/khula-400-latin-ext.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: 'Khula';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/khula-700-latin.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: 'Khula';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/khula-700-latin-ext.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: 'Khula';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/khula-300-latin.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: 'Khula';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/khula-300-latin-ext.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: 'Khula';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/khula-600-latin.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: 'Khula';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/khula-600-latin-ext.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
   * Frequency-ranked from the source main.css. Names describe the hue, not
   * the role, so a role can be re-pointed without a misleading token name.
   */
  --hor-c-white: #fff;          /* 43 uses */
  --hor-c-sky: #a6d4d9;         /* 15 - primary accent */
  --hor-c-navy: #002a41;        /*  8 */
  --hor-c-brown: #5a3b2f;       /*  7 */
  --hor-c-grey: #757270;        /*  6 - body copy */
  --hor-c-orange: #f47d0a;      /*  3 */
  --hor-c-sand: #eeebe8;        /*  3 */
  --hor-c-clay: #bd988b;        /*  3 */
  --hor-c-bone: #f6f5f3;        /*  2 */
  --hor-c-sky-dark: #84acba;    /*  2 */
  --hor-c-brown-mid: #7f5243;   /*  2 */
  --hor-c-brown-dark: #4f362a;  /*  2 */
  --hor-c-brown-deep: #321f17;  /*  2 */
  --hor-c-brown-warm: #7f5649;   /* .homepage-content p */
  --hor-c-brown-alt: #503629;    /* .content h3 */
  --hor-c-clay-light: #b5988b;   /* form input borders */
  --hor-c-black: #000;           /* .close-icon square (ported as a literal) */
  --hor-c-near-black: #00000b;   /* footer .con p strong */
  --hor-c-grey-light: #f5f5f5;   /* .pricing-table th */
  --hor-c-charcoal: #3f3f40;     /* .flex-control-paging li a */
  --hor-c-slider-dot: #adacac;   /* flexslider paging (label is text-indented away) */
  --hor-c-slider-active: #b41c20;
  --hor-c-slider-active-text: #4c4948;
  --hor-c-rule: #ddd;
  --hor-c-coral: #ff7866;
  --hor-c-off-white: #fafafa;

  /* Semantic roles - templates use these, never the raw hues above. */
  --hor-text: var(--hor-c-grey);
  --hor-text-strong: var(--hor-c-brown-mid);
  --hor-heading: var(--hor-c-brown);
  --hor-accent: var(--hor-c-sky);
  --hor-accent-dark: var(--hor-c-sky-dark);
  --hor-surface: var(--hor-c-white);
  --hor-surface-alt: var(--hor-c-sand);
  --hor-surface-muted: var(--hor-c-bone);
  --hor-footer-bg: var(--hor-c-navy);
  --hor-cta: var(--hor-c-orange);
  --hor-rule: var(--hor-c-rule);

  /* -------------------------------------------------------------- type
   * The source scale is small and inconsistent by modern standards. It is
   * carried over EXACTLY - h1 really is 24px on /therapists and 20px
   * elsewhere (CLAUDE.md §9). Do not rationalise these.
   */
  --hor-font: 'Khula', sans-serif;

  --hor-fs-12: 12px;
  --hor-fs-14: 14px;
  --hor-fs-15: 15px;   /* body copy */
  --hor-fs-16: 16px;
  --hor-fs-17: 17px;
  --hor-fs-18: 18px;
  --hor-fs-19: 19px;
  --hor-fs-20: 20px;   /* h1, most pages */
  --hor-fs-22: 22px;
  --hor-fs-24: 24px;   /* h1, /therapists */
  --hor-fs-30: 30px;
  --hor-fs-32: 32px;

  --hor-lh-body: 24px;
  --hor-lh-h1: 25px;    /* .content h1 in the source */
  --hor-lh-body-sm: 20px; /* .content h1 below 800px */

  /*
   * The source asks for 500 and gets 400 (see the @font-face note above).
   * Declaring 500 here reproduces that exactly: the browser resolves it to
   * the 400 face because no 500 face is shipped.
   */
  --hor-fw-body: 500;
  --hor-fw-bold: 700;

  /* ------------------------------------------------------------ layout */
  --hor-w-lg: 1116px;  /* #wrapper-lg */
  --hor-w-sm: 944px;   /* #wrapper-sm */
  --hor-w-team: 1200px;

  /* ------------------------------------------------- breakpoints (ref)
   * Custom properties cannot be used in media queries; these document the
   * source's breakpoints so the stylesheets stay consistent with each other.
   * Reproduce as-is - do not rationalise the overlap (CLAUDE.md §5).
   *
   *   430, 600, 767, 768, 800, 900, 1000, 1024, 1195, 1200, 1400
   */
}