/*
  Huixian Global Education Group — Design Tokens
  Single source of truth for color, type, spacing, radii, shadows, breakpoints.
  Do not hardcode brand colors anywhere else in the codebase — reference these
  custom properties instead.
*/

:root {
  /* ---- Brand color palette ("ULethbridge structure, Huixian soul") ---- */
  --hx-red:        #A32126; /* cinnabar — primary brand, CTAs, rules */
  --hx-red-dark:   #7E181C; /* hover/active, footer band */
  --hx-gold:       #C9A227; /* accent — dividers, icons, highlights (sparingly) */
  --hx-gold-dark:  #B58F1E; /* gold hover/active state */
  --hx-parchment:  #F5EFE3; /* rice-paper cream — section band backgrounds */
  --hx-ink:        #2B2622; /* near-black warm ink — body text */
  --hx-ink-soft:   #5C544D; /* secondary text */
  --hx-white:      #FFFFFF;
  --hx-mist:       #EDE7DA; /* borders, subtle fills */

  /* Semantic aliases */
  --color-bg:            var(--hx-white);
  --color-bg-alt:        var(--hx-parchment);
  --color-text:          var(--hx-ink);
  --color-text-soft:     var(--hx-ink-soft);
  --color-border:        var(--hx-mist);
  --color-primary:       var(--hx-red);
  --color-primary-hover: var(--hx-red-dark);
  --color-accent:        var(--hx-gold);
  --color-focus-ring:    var(--hx-gold);

  /* ---- Typography ----
     EN display font follows ulethbridge.ca (novalux theme): Parkinsans for
     headings, Inter for body. Chinese pages swap to Noto families via the
     :lang() override below and are unaffected. */
  --font-display: "Parkinsans", "Noto Sans SC", "Open Sans", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Noto Sans SC", sans-serif;

  --fs-100: 0.8125rem;  /* 13px — fine print */
  --fs-200: 0.9375rem;  /* 15px — small */
  --fs-300: 1rem;       /* 16px — body */
  --fs-400: 1.125rem;   /* 18px — lead body */
  --fs-500: 1.375rem;   /* 22px — h4 */
  --fs-600: 1.75rem;    /* 28px — h3 */
  --fs-700: 2.25rem;    /* 36px — h2 */
  --fs-800: 3rem;       /* 48px — h1 */
  --fs-900: 4rem;       /* 64px — hero statement */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

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

  /* ---- Spacing scale (4px base) ---- */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(43, 38, 34, 0.08);
  --shadow-md: 0 4px 12px rgba(43, 38, 34, 0.10);
  --shadow-lg: 0 12px 32px rgba(43, 38, 34, 0.14);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-5);
  --header-height: 88px;
  --header-height-utility: 36px;

  /* ---- Breakpoints (reference only — CSS custom properties are not usable
     inside @media queries directly; kept here for documentation, mirrored
     as literal values in main.css) ----
     --bp-sm: 360px;
     --bp-md: 768px;
     --bp-lg: 1024px;
     --bp-xl: 1440px;
  */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

/* Chinese-language pages: serif/sans stacks lead with Noto SC, Latin as fallback */
:lang(zh-Hans),
:lang(zh) {
  --font-display: "Noto Serif SC", "Playfair Display", serif;
  --font-body: "Noto Sans SC", "Inter", sans-serif;
}