/* =====================================================================
   IHA Spaces — Design Tokens
   Source of truth for colour, type, spacing.
   Do not improvise. If a token isn't here, it doesn't exist.
   ===================================================================== */

:root {
  /* ---------- Colour: Chalk (warm off-white, primary surface) ---------- */
  --chalk-50:  #FAF8F4;
  --chalk-100: #F4F1EA;
  --chalk-200: #EDE9E2;
  --chalk-400: #D8D2C5;
  --chalk-600: #A8A294;
  --chalk-800: #6B6759;
  --chalk-900: #3D3B33;

  /* ---------- Colour: Athangudi (oxide red, brand accent) ---------- */
  --athangudi-50:  #FAEEEB;
  --athangudi-100: #F0CDC4;
  --athangudi-200: #DC9A87;
  --athangudi-400: #C16450;
  --athangudi-600: #A43B2A;
  --athangudi-800: #7A2A1E;
  --athangudi-900: #4A1B14;

  /* ---------- Colour: Pale Stone (warm grey, secondary surface) ---------- */
  --pale-stone-50:  #F4F2EE;
  --pale-stone-100: #E5E1D9;
  --pale-stone-200: #D2CCBF;
  --pale-stone-400: #B5AFA6;
  --pale-stone-600: #8C877E;
  --pale-stone-800: #5C5953;
  --pale-stone-900: #36342F;

  /* ---------- Colour: Slate (deep grey, supporting text) ---------- */
  --slate-50:  #EFEEEB;
  --slate-100: #D9D7D2;
  --slate-200: #B6B2AB;
  --slate-400: #82807A;
  --slate-600: #5A5751;
  --slate-800: #3D3B37;
  --slate-900: #26241F;

  /* ---------- Colour: Ink (near-black, primary text + dark surfaces) ---------- */
  --ink-50:  #EAE8E4;
  --ink-100: #C6C3BC;
  --ink-200: #918E86;
  --ink-400: #5C5954;
  --ink-600: #3A3833;
  --ink-800: #1F1D1A;
  --ink-900: #0E0D0B;

  /* ---------- Semantic: Surfaces ---------- */
  --surface-primary:    var(--chalk-50);
  --surface-secondary:  var(--chalk-100);
  --surface-tertiary:   var(--chalk-200);
  --surface-inverse:    var(--ink-800);
  --surface-brand:      var(--athangudi-600);

  /* ---------- Semantic: Text ---------- */
  --text-primary:       var(--ink-800);
  --text-secondary:     var(--slate-600);
  --text-tertiary:      var(--slate-400);
  --text-inverse:       var(--chalk-50);
  --text-inverse-soft:  var(--chalk-200);
  --text-brand:         var(--athangudi-600);
  --text-brand-strong:  var(--athangudi-800);
  --text-on-brand:      var(--chalk-50);

  /* ---------- Semantic: Borders ---------- */
  --border-subtle:      var(--pale-stone-200);
  --border-default:     var(--slate-400);    /* upgraded per §1.4 for AA non-text contrast */
  --border-strong:      var(--slate-600);
  --border-focus:       var(--athangudi-600);

  /* ---------- Semantic: Interactive ---------- */
  --action-primary:         var(--athangudi-600);
  --action-primary-hover:   var(--athangudi-800);
  --action-primary-active:  var(--athangudi-900);
  --action-disabled-bg:     var(--chalk-200);
  --action-disabled-text:   var(--slate-400);

  /* ---------- Typography: Families ---------- */
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Typography: Fluid scale ---------- */
  --text-display-xl:  clamp(56px, 8vw, 112px);
  --text-display-l:   clamp(44px, 6vw, 80px);
  --text-display-m:   clamp(32px, 4.5vw, 56px);

  --text-heading-l:   clamp(28px, 3.5vw, 40px);
  --text-heading-m:   clamp(22px, 2.5vw, 28px);
  --text-heading-s:   clamp(18px, 2vw, 22px);

  --text-body-l:      18px;
  --text-body-m:      16px;
  --text-body-s:      14px;

  --text-label-l:     14px;
  --text-label-m:     12px;
  --text-caption:     13px;

  /* ---------- Typography: Line height ---------- */
  --leading-tight:    1.05;
  --leading-snug:     1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;

  /* ---------- Typography: Tracking ---------- */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.12em;

  /* ---------- Spacing: 4px-grid scale ---------- */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;
  --space-11:   192px;
  --space-12:   256px;

  /* ---------- Layout: Container ---------- */
  --container-max: 1280px;
  --container-padding-mobile:  24px;
  --container-padding-tablet:  48px;
  --container-padding-desktop: 96px;

  /* ---------- Layout: Section rhythm ---------- */
  --section-spacing-s:  var(--space-8);
  --section-spacing-m:  var(--space-9);
  --section-spacing-l:  var(--space-10);
  --section-spacing-xl: var(--space-11);

  /* ---------- Layout: Breakpoints (for reference; used in @media) ---------- */
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;
}