/* Brookland - Colour palette
   Cream and white dominate. Olive is the active colour.
   Orange appears only for emphasis (~5% of any surface).
   Proportions: White 35 / Cream 25 / Dark Olive 20 / Deep Olive 15 / Orange 5 */
:root {
  /* ---- Raw brand colours ---- */
  --brand-soft-white: #FFFDF5;   /* main page background, primary surface  */
  --brand-warm-cream: #F3F0E7;   /* cards, secondary surface, text on dark */
  --brand-deep-olive: #51533F;   /* buttons, headings, links, key actions  */
  --brand-dark-olive: #2E2F20;   /* dark sections, deep contrast surfaces   */
  --brand-burnt-orange: #A04A1E;  /* secondary accent - use sparingly        */

  /* ---- Olive tint/shade ramp (derived, harmonious in oklch) ---- */
  --olive-900: #202116E6;        /* deepest, scrims & overlays */
  --olive-800: #2E2F20;          /* = dark olive */
  --olive-700: #3D3F2C;          /* hover on dark olive */
  --olive-600: #51533F;          /* = deep olive */
  --olive-500: #5E6049;          /* hover on deep olive (lighter) */
  --olive-400: #6E7059;          /* disabled / muted action */
  --olive-300: #9A9B85;          /* muted text on light, hairline on cream */
  --olive-200: #C4C4B4;          /* soft divider */
  --olive-100: #E3E1D4;          /* tinted hairline on white */

  /* ---- Orange tint/shade ---- */
  --orange-600: #A04A1E;         /* = burnt orange */
  --orange-700: #8A3F19;         /* hover/press */
  --orange-100: #F2E2D7;         /* faint orange wash (badges, highlights) */

  /* ---- Cream/white steps ---- */
  --cream-50: #FFFDF5;           /* = soft white */
  --cream-100: #F8F6EE;          /* between white and cream */
  --cream-200: #F3F0E7;          /* = warm cream */
  --cream-300: #EAE6D9;          /* pressed cream surface */

  /* ---- Semantic aliases - reference these in components ---- */

  /* Surfaces */
  --surface-page: var(--brand-soft-white);
  --surface-card: var(--brand-warm-cream);
  --surface-raised: var(--brand-soft-white);
  --surface-inverse: var(--brand-dark-olive);
  --surface-inverse-soft: var(--brand-deep-olive);
  --surface-pressed: var(--cream-300);

  /* Text */
  --text-strong: var(--brand-dark-olive);   /* headlines on light */
  --text-body: var(--brand-deep-olive);      /* body copy on light */
  --text-muted: var(--olive-400);            /* captions, meta */
  --text-faint: var(--olive-300);            /* placeholders, hints */
  --text-on-dark: var(--brand-warm-cream);   /* body on dark surfaces */
  --text-on-dark-strong: var(--brand-soft-white);
  --text-accent: var(--brand-burnt-orange);

  /* Actions */
  --action-primary: var(--brand-deep-olive);
  --action-primary-hover: var(--olive-500);
  --action-primary-press: var(--brand-dark-olive);
  --action-primary-text: var(--brand-soft-white);
  --action-accent: var(--brand-burnt-orange);
  --action-accent-hover: var(--orange-700);
  --action-disabled: var(--olive-400);

  /* Lines & borders */
  --border-hairline: var(--olive-100);       /* on white */
  --border-soft: var(--olive-200);           /* on cream */
  --border-strong: var(--brand-deep-olive);
  --border-on-dark: #45473522;

  /* Links */
  --link: var(--brand-deep-olive);
  --link-hover: var(--brand-burnt-orange);

  /* Focus ring */
  --focus-ring: var(--brand-burnt-orange);
}