/*
 * File: assets/css/tokens.css
 * Description: Brand tokens — exact hex from CLAUDE.md §8 (production stylesheet).
 * Project: Spa Booking & Loyalty PWA — The Spa & Beyond Wellness
 * Version: 1.0.0
 * Created: 2026-07-19 @ 21:30 SAST
 * Modified: 2026-07-19 @ 21:30 SAST
 * Changes: v1.0.0 — palette + type + spacing + radius + shadow tokens
 */

/* Self-hosted webfonts — pulled from brand-assets/, served locally. */
@font-face {
  font-family: "Aptos";
  src: url("../fonts/Aptos.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aptos-Light";
  src: url("../fonts/Aptos-Light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aptos-SemiBold";
  src: url("../fonts/Aptos-SemiBold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marcellus-Regular";
  src: url("../fonts/Marcellus-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette (exact hex from CLAUDE.md §8) */
  --spa-primary: #808060;   /* sage/olive — display accents, buttons */
  --spa-dark:    #323721;   /* headings, footer */
  --spa-mid:     #474B37;   /* secondary text, hovers */
  --spa-darkest: #2D311D;   /* deepest olive — high contrast body */
  --spa-bg:      #F2F0EE;   /* page background */
  --spa-sand:    #DCD4C8;   /* cards, section bands */
  --spa-taupe:   #B7ACA0;   /* borders, muted UI */
  --spa-tan:     #AF9B81;   /* subtle accents */
  --wa-green:    #25D366;   /* WhatsApp buttons only */

  /* Semantic tokens (WCAG-safe body text uses --spa-darkest on --spa-bg) */
  --color-bg:            var(--spa-bg);
  --color-surface:       #FFFFFF;
  --color-surface-alt:   var(--spa-sand);
  --color-text:          var(--spa-darkest);
  --color-text-muted:    var(--spa-mid);
  --color-border:        var(--spa-taupe);
  --color-heading:       var(--spa-dark);
  --color-accent:        var(--spa-primary);      /* display only; not body copy */
  --color-accent-hover:  var(--spa-mid);
  --color-link:          var(--spa-dark);
  --color-danger:        #8b1e1e;
  --color-warning-bg:    #f4e9c1;
  --color-warning-text:  #4a3a00;
  --color-success:       #2f6f3a;

  /* Type */
  --font-display: "Marcellus-Regular", "Georgia", "Times New Roman", serif;
  --font-body:    "Aptos", "Segoe UI", Arial, sans-serif;
  --font-light:   "Aptos-Light", "Segoe UI", Arial, sans-serif;
  --font-strong:  "Aptos-SemiBold", "Segoe UI", Arial, sans-serif;

  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-base: 1rem;        /* 16px */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.375rem;    /* 22px */
  --fs-2xl:  1.75rem;     /* 28px */
  --fs-3xl:  2.25rem;     /* 36px */
  --fs-4xl:  3rem;        /* 48px */

  --lh-tight: 1.2;
  --lh-body:  1.55;

  /* Spacing (4-based) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(45, 49, 29, 0.08);
  --sh-2: 0 4px 14px rgba(45, 49, 29, 0.12);

  /* Layout */
  --page-max: 1120px;
  --nav-h: 64px;
  --focus-ring: 0 0 0 3px rgba(128, 128, 96, 0.35);
}