/* Rico Homes design tokens. Loaded by every page before css/rico.css, and the
   only place a colour, font, size or space is defined. Components reference
   these by role (--color-text-muted), never by hue, so a palette change is a
   one-file edit.

   Contrast ratios are against --color-background unless noted. Gold is a
   decoration colour: at 3.4:1 it is used only for rules and numerals at 24px
   and up, never for running text. */
:root {
  /* surfaces */
  --color-background:      #F5F2EC;  /* stone */
  --color-surface:         #FBFAF7;  /* paper: cards, inputs, panels */
  --color-surface-sunken:  #EBE6DC;  /* sand: contact band, image wells */
  --color-image-well:      #E6E1D7;  /* behind an image while it loads */

  /* text */
  --color-text:            #17191A;  /* ink, 15.8:1 */
  --color-text-secondary:  #3C3F3E;  /* graphite, 9.6:1 */
  --color-text-muted:      #5E5D57;  /* slate, 5.9:1 */
  --color-text-inverse:    #F5F2EC;
  --color-text-inverse-muted: #DAD4C6;

  /* lines */
  --color-border:          #DDD7CC;
  --color-border-strong:   #C9C2B4;
  --color-border-inverse:  rgba(245, 242, 236, 0.24);

  /* brand */
  --color-brand:           #1F3B34;  /* Karura green, 10.8:1 */
  --color-brand-hover:     #142A24;
  --color-accent:          #A97A28;  /* logo gold: rules and numerals only */
  --color-accent-inverse:  #D9B45E;  /* gold on green or ink */
  --color-ink-surface:     #17191A;  /* footer, menu sheet */
  --color-on-ink:          #CFCBC2;  /* text on ink, 11.6:1 */
  --color-on-ink-muted:    #8F8B82;  /* labels on ink, 5.4:1 */
  --color-on-ink-border:   #34373A;
  --color-on-ink-field:    #212426;
  --color-on-ink-field-border: #3A3D40;

  /* feedback */
  --color-success:         #2F6B4A;  /* 5.6:1 */
  --color-warning:         #8A5A12;  /* 5.2:1 */
  --color-error:           #A23B2E;  /* 5.9:1 */
  --color-error-surface:   #F6E9E6;
  --color-error-text:      #7C2C22;  /* on --color-error-surface */
  --color-error-inverse:   #F3C2B8;  /* errors on green */

  /* type */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-display: clamp(2.875rem, 1.6rem + 5.2vw, 5.75rem);   /* 46 -> 92 */
  --text-h1:      clamp(2.625rem, 1.7rem + 3.9vw, 4.75rem);   /* 42 -> 76 */
  --text-h2:      clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);    /* 34 -> 56 */
  --text-h3:      clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);     /* 28 -> 40 */
  --text-title:   clamp(1.625rem, 1.5rem + 0.4vw, 1.875rem);  /* property title 26 -> 30 */
  --text-lead:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 -> 19 */
  --text-body:    1.0625rem;  /* 17 */
  --text-ui:      0.9375rem;  /* 15 */
  --text-small:   0.8125rem;  /* 13 */
  --text-label:   0.75rem;    /* 12, caps */
  --tracking-label: 0.16em;

  /* space: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-section: clamp(64px, 8vw, 128px);

  /* layout */
  --container: 1320px;
  --gutter: 24px;
  --page-margin: clamp(20px, 5.5vw, 80px);
  --header-height: 84px;
  --header-height-compact: 72px;

  /* shape */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-sm: 0 1px 2px rgba(23, 25, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 25, 26, 0.10);

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 500ms;
}