/*
 * Purpose: Room Haina design tokens - the single source of truth for the entire
 * project. Nothing anywhere else may use a raw colour, size or spacing value.
 *
 * Colours are the final approved brand palette. Do not substitute alternatives.
 * Spacing, radii and type sizes follow the 4-point system.
 */

:root {
  /* ---------------------------------------------------------------- BRAND */
  /* The three approved brand colours, taken from the finalised logo. */
  --rh-dark: #032622;   /* Brand Dark / primary ink */
  --rh-teal: #086E61;   /* Primary Teal - the functional interaction colour */
  --rh-lime: #86C81B;   /* Lime Accent - used sparingly, never a default CTA */

  /* Supporting surfaces */
  --rh-white: #FFFFFF;
  --rh-surface: #F6F8F7;
  --rh-border: #E2E6E4;

  /* Text */
  --rh-text-primary: #032622;
  /*
   * Body copy sits a step softer than headings. #032622 is the brand ink and
   * right for a heading; used for every paragraph on the page it reads as hard
   * black and makes the whole layout feel heavier than it is. This is 11.88:1
   * on white and 11.14:1 on --rh-surface, so it is softer to the eye without
   * giving up anything on legibility.
   */
  --rh-text-body: #2C3A37;
  /*
   * Secondary text has to clear 4.5:1 on every surface it lands on, not just on
   * white. #68716E managed 5.03 on white but only 4.46 on the teal tints, which
   * is how three separate captions ended up failing on tinted panels. This
   * clears it everywhere:
   *   white 5.41 · surface 5.07 · teal-04 5.10 · teal-08 4.80 · teal-12 4.55
   */
  --rh-text-secondary: #636C69;
  --rh-text-inverse: #FFFFFF;

  /* Tints */
  /*
   * --rh-teal-light predates the scale below and is within a hair of the 08
   * step. It is aliased rather than kept as a separate value, so there is one
   * tint system rather than two nearly-identical ones drifting apart - about
   * twenty rules still reference it and none of them needed to change.
   */
  --rh-teal-light: var(--rh-teal-08);
  --rh-lime-light: #F2F8E8;

  /*
   * The teal tint scale - the primary colour mixed into white at increasing
   * strength. This is how the brand colour should carry a surface: a wash that
   * tints the page rather than a solid block that stops it.
   *
   * Every value below is measured, not guessed. Contrast of TEAL TEXT on each:
   *   04  5.81:1   08  5.48:1   12  5.16:1   20  4.56:1   32  3.75:1
   *
   * So teal text is safe on 04 through 20 and FAILS on 32. Use 32 for
   * decoration, borders and large non-text shapes only - never as a background
   * for teal body copy. Dark ink clears 9:1 on all of them.
   */
  --rh-teal-04: #F5F9F9;
  --rh-teal-08: #EBF3F2;
  --rh-teal-12: #E1EEEC;
  --rh-teal-20: #CEE2DF;
  --rh-teal-32: #B0D1CC;

  /* Feedback */
  --rh-success: #19865C;
  --rh-warning: #C88719;
  --rh-error: #D94B4B;

  /*
   * Derived interaction states, expressed from the brand colours.
   *
   * The lime text tokens are darkened forms of --rh-lime. Lime at its brand
   * value does not reach 4.5:1 against the light lime tint, so text and small
   * icons sitting on that tint use these instead. The brand lime itself is
   * unchanged and is still what appears as a fill or accent.
   */
  --rh-lime-text: #4C7A0F;      /* AA on --rh-lime-light */
  --rh-lime-text-strong: #3E6A0C;

  /*
   * The same treatment for warning and error. At their brand values they reach
   * only 3.03:1 and 4.15:1 on white, so neither is legal as body text under
   * WCAG 1.4.3. These darkened forms carry the text; the brand values stay for
   * borders, fills and icons, where the 3:1 non-text threshold applies.
   */
  --rh-warning-text: #8F5E07;   /* 5.57:1 on white, 5.22:1 on --rh-surface */
  --rh-error-text: #B02E2E;     /* 6.41:1 on white, 6.01:1 on --rh-surface */

  /*
   * Saved is red everywhere, not the brand teal - a filled red heart is the
   * one convention every visitor already reads as "you saved this", and it
   * cannot be confused with the teal used for ordinary links and actions.
   * The fill carries the colour; the label uses the darker form so it still
   * clears 4.5:1 as text.
   */
  --rh-saved: #D94B4B;          /* 4.15:1 - icon fill, non-text */
  --rh-saved-text: #B02E2E;     /* 6.41:1 on white - the "Saved" label */

  --rh-teal-hover: #065A4F;
  --rh-teal-active: #054A41;
  --rh-dark-hover: #05403A;
  --rh-border-strong: #C9D1CE;
  --rh-surface-alt: #EEF2F0;

  /*
   * Form control boundaries are UI components, so they need 3:1 against the
   * page (WCAG 1.4.11) - unlike a decorative divider, which --rh-border still
   * handles at its lighter value.
   */
  --rh-border-input: #808B88;   /* 3.52:1 on white, 3.30:1 on --rh-surface */

  /* Focus ring - must stay clearly visible against every surface */
  --rh-focus: #086E61;

  /* ------------------------------------------------------------- SPACING */
  /* Strict 4-point scale. No value outside this list may be used. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* ---------------------------------------------------------------- TYPE */
  /*
   * Source Sans 3 Variable is the approved UI font, self-hosted in
   * assets/fonts. The fallback stack keeps the layout intact if it fails.
   */
  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);

  /*
   * Type scale. The brief specifies 14-15px dense UI and 18px body-large, so
   * those sizes are deliberately included alongside the 4-point steps.
   */
  --fs-12: 0.75rem;   /* 12px - small labels */
  --fs-13: 0.8125rem; /* 13px - dense UI labels */
  --fs-14: 0.875rem;  /* 14px - dense UI */
  --fs-15: 0.9375rem; /* 15px - buttons */
  --fs-16: 1rem;      /* 16px - body */
  --fs-18: 1.125rem;  /* 18px - body large */
  --fs-20: 1.25rem;   /* 20px - H4 / price */
  --fs-24: 1.5rem;    /* 24px - price large */
  --fs-28: 1.75rem;   /* 28px - H3 */
  --fs-32: 2rem;      /* 32px - mobile H1 */
  --fs-40: 2.5rem;    /* 40px - H2 */
  --fs-48: 3rem;
  --fs-56: 3.5rem;    /* 56px - desktop H1 */

  /* Semantic type aliases */
  --fs-h1: var(--fs-32);
  --fs-h2: var(--fs-28);
  --fs-h3: var(--fs-24);
  --fs-h4: var(--fs-20);
  --fs-body: var(--fs-16);
  --fs-body-lg: var(--fs-18);
  --fs-small: var(--fs-14);
  --fs-caption: var(--fs-13);
  --fs-button: var(--fs-15);

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* -------------------------------------------------------------- LAYOUT */
  --container-max: 1320px;
  --container-narrow: 720px;   /* readable measure for running text */
  --container-pad: var(--space-16);

  --grid-gap: var(--space-16);

  /*
   * Gap between the breadcrumb trail and whatever a detail page opens with -
   * a title block on college and locality, a gallery on a property. One token
   * so the three pages cannot drift apart again.
   */
  --rh-crumbs-gap: var(--space-16);

  /* -------------------------------------------------------------- RADIUS */
  --r-input: 8px;
  --r-button: 8px;
  --r-card: 12px;
  --r-media: 16px;
  --r-pill: 999px;

  /* ------------------------------------------------------------- SHADOWS */
  /* Used sparingly. Whitespace, borders and soft surfaces come first. */
  --shadow-sm: 0 1px 2px rgba(3, 38, 34, 0.06);
  --shadow-md: 0 4px 16px rgba(3, 38, 34, 0.08);
  --shadow-lg: 0 12px 32px rgba(3, 38, 34, 0.12);

  /* -------------------------------------------------------------- MOTION */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ------------------------------------------------------------- Z-INDEX */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  /*
   * The header sits above in-page sticky bars. It creates a stacking context,
   * so its own dropdown can never rise above it - at the same level as the
   * sticky search bar the bar won on DOM order and swallowed the account menu.
   */
  --z-header: 250;
  --z-overlay: 300;
  --z-modal: 400;
  --z-drawer: 450;
  --z-toast: 500;

  /* --------------------------------------------------------------- SIZES */
  --header-height: 64px;
  --input-height: 48px;
  --touch-target: 44px;
}

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-24);
    --grid-gap: var(--space-24);
    --fs-h1: var(--fs-40);
    --fs-h2: var(--fs-32);
    --header-height: 72px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-32);
    --fs-h1: var(--fs-56);
    --fs-h2: var(--fs-40);
    --fs-h3: var(--fs-28);
  }
}

/* -------------------------------------------------------------------------
 * Self-hosted Source Sans 3 Variable.
 * Weight 200-900 in a single file per subset, so every weight in the type
 * scale is available without additional requests.
 * ---------------------------------------------------------------------- */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-normal.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: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-normal.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: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-italic.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: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-italic.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;
}