/* ilm design tokens.
   Raw palette first (--ilm-*), then the semantic tokens the UI should use.
   Every text pair named below passes WCAG AA (4.5:1); contrast figures are in brand/README.md.
   Layout CSS uses logical properties only, so these work unchanged in Arabic (dir="rtl"). */

@import url("../fonts/fonts.css");

:root {
  /* ── Palette ── */
  --ilm-green-950: #0B2621;
  --ilm-green-900: #12352E;  /* the brand green: wordmark, primary buttons */
  --ilm-green-800: #1F4A40;
  --ilm-green-700: #2F5E52;
  --ilm-paper:     #F9F7F1;
  --ilm-sand:      #EFE8D8;
  --ilm-sand-line: #DED6C3;
  --ilm-ink:       #22302C;
  --ilm-muted:     #56635F;
  --ilm-emas:       #A9853C;  /* the star. Graphics and text ≥24px only (3.2:1 on paper) */
  --ilm-emas-light: #D2B272;  /* the star on green; gold buttons with green text */
  --ilm-emas-text:  #7D5F26;  /* gold for small text on paper or sand */
  --ilm-live:      #D2453B;   /* the live dot only, never text */

  /* ── Semantic, light (default) ── */
  --bg:           var(--ilm-paper);
  --surface:      var(--ilm-sand);
  --surface-raised: #FFFFFF;
  --text:         var(--ilm-ink);
  --text-muted:   var(--ilm-muted);
  --brand:        var(--ilm-green-900);
  --on-brand:     var(--ilm-paper);
  --accent:       var(--ilm-emas);
  --accent-text:  var(--ilm-emas-text);
  --line:         var(--ilm-sand-line);  /* dividers only */
  --field-border: #8A8170;               /* input outlines, 3.6:1 */
  --focus:        var(--ilm-green-900);
  --success:      #1F6B45;
  --danger:       #A33A32;
  --warning:      #8A5A00;
  --live:         var(--ilm-live);
  --banner-bg:    var(--ilm-green-900);  /* live and announcement banners */
  --banner-text:  var(--ilm-paper);
  color-scheme: light;

  /* ── Type ── */
  --font-display: "Baloo Bhaijaan 2", "Nunito", system-ui, sans-serif;
  --font-body:    "Nunito", "IBM Plex Sans Arabic", system-ui, sans-serif;   /* Arabic falls through to Plex */
  --font-arabic:  "IBM Plex Sans Arabic", "Baloo Bhaijaan 2", system-ui, sans-serif;
  --type-scale: 1;   /* 1.125 in Arabic: Arabic reads ~15% smaller at the same px size */
  --leading-body: 1.5;
  --leading-tight: 1.15;
  --weight-body: 400;
  --weight-strong: 700;
  --weight-display: 700;
  --weight-logo: 800;

  /* ── Shape and space ── */
  --radius-sm: 6px;    /* chips */
  --radius-md: 12px;   /* inputs, buttons */
  --radius-lg: 20px;   /* cards */
  --radius-pill: 999px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --gutter: 16px;
  --tap: 44px;         /* minimum touch target */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
}

/* The scale is declared here too, so it re-resolves wherever :lang(ar) changes --type-scale. */
:root, :lang(ar) {
  --step--1: calc(12px * var(--type-scale));
  --step-0:  calc(14px * var(--type-scale));
  --step-1:  calc(16px * var(--type-scale));  /* body */
  --step-2:  calc(18px * var(--type-scale));
  --step-3:  calc(22px * var(--type-scale));
  --step-4:  calc(28px * var(--type-scale));
  --step-5:  calc(36px * var(--type-scale));
  --step-6:  calc(48px * var(--type-scale));
}

/* Dark: green becomes the ground, gold becomes the action colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ilm-green-950); --surface: var(--ilm-green-900); --surface-raised: var(--ilm-green-800);
    --text: var(--ilm-paper); --text-muted: #B9C7BF;
    --brand: var(--ilm-emas-light); --on-brand: var(--ilm-green-900);
    --accent: var(--ilm-emas-light); --accent-text: var(--ilm-emas-light);
    --line: var(--ilm-green-700); --field-border: #6F8F84; --focus: var(--ilm-emas-light);
    --success: #7FD1A8; --danger: #F2948A; --warning: #E8B55A;
    --banner-bg: var(--ilm-green-700); --banner-text: var(--ilm-paper);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--ilm-green-950); --surface: var(--ilm-green-900); --surface-raised: var(--ilm-green-800);
  --text: var(--ilm-paper); --text-muted: #B9C7BF;
  --brand: var(--ilm-emas-light); --on-brand: var(--ilm-green-900);
  --accent: var(--ilm-emas-light); --accent-text: var(--ilm-emas-light);
  --line: var(--ilm-green-700); --field-border: #6F8F84; --focus: var(--ilm-emas-light);
  --success: #7FD1A8; --danger: #F2948A; --warning: #E8B55A;
  --banner-bg: var(--ilm-green-700); --banner-text: var(--ilm-paper);
  color-scheme: dark;
}

/* Arabic: bigger, looser, never letter-spaced (spacing breaks the joins). */
:lang(ar) {
  --type-scale: 1.125;
  --leading-body: 1.75;
  --leading-tight: 1.4;
  font-family: var(--font-arabic);
  letter-spacing: 0;
}
:lang(ar) :is(h1, h2, h3, .display) { font-family: var(--font-display); }