/* ==========================================================================
   Hocan Holdings — shared design tokens
   One source of truth for colour, type, spacing, radius and elevation so every
   page reads as the same product. Include before a page's own <style> block.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand:            #C47A5A;   /* terracotta — primary action */
  --brand-strong:     #a04a39;   /* darker terracotta — small text, AA on white */
  --brand-soft:       #ffd9cf;   /* blush wash */
  --navy:             #1A1A2E;   /* headings, dark surfaces */
  --sky:              #4AB3D4;   /* secondary accent */
  --sky-soft:         #e0f2ff;   /* cool wash */

  /* ---- Text ----------------------------------------------------------- */
  --text:             #14213d;   /* primary copy — near-black, cool undertone */
  --text-secondary:   #50617a;   /* sub-labels, nav links */
  --text-muted:       #6b7280;   /* helper copy, captions */

  /* ---- Surfaces ------------------------------------------------------- */
  --canvas:           #f4f6f8;   /* page background */
  --surface:          #ffffff;   /* cards */
  --surface-sunken:   #f7f9fb;   /* image wells, inset areas */
  --line:             #e8ecf0;   /* borders, dividers */

  /* ---- Status --------------------------------------------------------- */
  --success:          #2f855a;
  --warning:          #b7791f;
  --danger:           #c53030;

  /* ---- Type ----------------------------------------------------------- */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;

  /* Type scale — tracking tightens as size grows */
  --text-display:  44px;  --tracking-display: -0.025em;  --leading-display: 1.08;
  --text-h1:       36px;  --tracking-h1:      -0.022em;  --leading-h1:      1.12;
  --text-h2:       28px;  --tracking-h2:      -0.018em;  --leading-h2:      1.2;
  --text-h3:       21px;  --tracking-h3:      -0.012em;  --leading-h3:      1.3;
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-sm:       14px;
  --text-xs:       12.5px;

  /* ---- Spacing (8px base) --------------------------------------------- */
  --space-1: 8px;   --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
  --space-5: 40px;  --space-6: 48px;  --space-8: 64px;  --space-10: 80px;
  --space-12: 96px;

  /* ---- Radius — three steps, not eighteen ----------------------------- */
  --radius-sm:   8px;   /* inputs, chips, small controls */
  --radius:      14px;  /* cards, panels, nav */
  --radius-lg:   20px;  /* hero panels, large sections */
  --radius-pill: 999px; /* pills and avatars only */

  /* ---- Elevation — restrained, tinted rather than heavy ---------------- */
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, .06), 0 2px 8px rgba(20, 33, 61, .04);
  --shadow:    0 8px 22px rgba(20, 33, 61, .07);
  --shadow-lg: 0 18px 44px rgba(20, 33, 61, .10);

  /* ---- Layout --------------------------------------------------------- */
  --max-width: 1200px;
  --nav-height: 44px;
}

/* ---- Shared primitives ------------------------------------------------- */

.u-container {
  width: min(var(--max-width), 92%);
  margin-inline: auto;
}

/* Consistent focus ring everywhere, replacing per-page variants. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}