/* SETTINGS — the only place to tune the SYSTEM. MindLinks v6. */

:root {
  /* Space — grid-unit is the SINGLE base unit (4pt grid). */
  --grid-unit: 4px;
  --space-2xs: 2px;

  /* Type */
  --font-xs: 0.6875rem;  /* 11px — mono labels */
  --font-sm: 0.875rem;   /* 14px */
  --font-base: 1rem;     /* 16px — body */
  --font-md: 1.125rem;   /* 18px — lede */
  --font-lg: 1.3125rem;  /* 21px — card titles */
  --font-xl: 1.75rem;    /* 28px */
  --font-2xl: 2.25rem;   /* 36px */
  --font-3xl: 3rem;      /* 48px */
  --font-4xl: 4.25rem;   /* 68px — hero */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.85;   /* Arabic body */

  --tracking-display: -0.03em;
  --tracking-label: 0.16em;
  --tracking-wordmark: 0.06em;

  /* @brand:typography — regenerated by `npm run rebrand` */
  --font-family: "Alexandria", ui-sans-serif, system-ui, sans-serif;
  --font-family-display: "Reem Kufi", "Alexandria", ui-sans-serif, system-ui, sans-serif;
  --font-family-mono: "Cascadia Mono", ui-monospace, "Menlo", monospace;
  /* @brand:end */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --layout-max: 73rem;
  --measure: 64ch;

  /* Logo geometry. The icon is the wordmark cropped, never a separate file. */
  --logo-viewbox: 0 0 688 123;
  --icon-viewbox: -17.3 -8.1 140 140;
  --logo-min-width: 104px;     /* below this, use the icon */

  --motion-draw: 900ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) { :root { --motion-draw: 1ms; } }
/* PRIMITIVES — computed tokens. MindLinks v8.
 *
 * Hex only here (.stylelintrc color-no-hex). Generated in OKLCH so step N carries
 * the same visual weight in every family.
 *
 * THREE families: the lime, a cool blue-grey, and a functional red.
 * NOTE: there is no --border token in this system, by design. */

:root {
  --space-1: calc(var(--grid-unit) * 1);
  --space-2: calc(var(--grid-unit) * 2);
  --space-3: calc(var(--grid-unit) * 3);
  --space-4: calc(var(--grid-unit) * 4);
  --space-6: calc(var(--grid-unit) * 6);
  --space-8: calc(var(--grid-unit) * 8);
  --space-12: calc(var(--grid-unit) * 12);
  --space-16: calc(var(--grid-unit) * 16);
  --space-24: calc(var(--grid-unit) * 24);
  --space-section: clamp(var(--space-12), 6vw, var(--space-24));


  /* Lime green. The single brand colour, #61a700. 6.31:1 on ink and 5.57:1 on the card surface — it works as text there. On white it reaches 2.98:1, which is the graphics threshold, so the logotype and icon keep it on light grounds but small lime TEXT on white drops to 800 (6.73:1). */
  /* @brand:colors — regenerated by `npm run rebrand` */
  --brand-50:  #f1fde9;
  --brand-100: #e2f9d3;
  --brand-200: #c7f1aa;
  --brand-300: #ade583;
  --brand-400: #91d25a;
  --brand-500: #74ba2f;
  --brand-600: #61a700;   /* THE brand colour */
  --brand-700: #4d8700;
  --brand-800: #3a6702;   /* deep twin — lime text on white */
  --brand-900: #244500;
  /* @brand:end */

  /* Blue-grey. Cool and slightly blue so it sits under the lime rather than fighting it. 875 / 925 are SURFACE steps — this system has no borders, so a card separates from the ground by value, not by a line. */
  --neutral-0:   #ffffff;
  --neutral-50:  #f5f9fd;
  --neutral-100: #e4f0fd;
  --neutral-200: #d2deeb;
  --neutral-300: #bdc9d5;
  --neutral-400: #a5b1bd;
  --neutral-500: #8c97a3;
  --neutral-600: #6f7a86;
  --neutral-700: #545e69;
  --neutral-800: #38424d;
  --neutral-900: #1e2730;
  --neutral-875: #242c36;   /* raised surface */
  --neutral-925: #171f28;   /* card surface — replaces borders */
  --neutral-950: #0b121a;   /* page ground */

  /* Functional only: destructive actions and errors. Never decorative. */
  --danger-50:  #fff6f5;
  --danger-100: #fee9e6;
  --danger-200: #fed0cb;
  --danger-300: #feb0a9;
  --danger-400: #fe8880;
  --danger-500: #eb6560;
  --danger-600: #ca4442;
  --danger-700: #a32b2c;
  --danger-800: #781619;
  --danger-900: #4c0509;
}
/* SEMANTIC — role tokens. MindLinks v8.
 *
 * One brand colour, one grey, one functional red. No --border token: surfaces
 * separate by a step in ground value, never by a line.
 * --accent-foreground is what sits ON the accent, and it differs per theme —
 * without it a hover state paints lime on lime.
 */

:root { color-scheme: dark light; }

:root,
[data-theme-lock="dark"] {
  --background:            var(--neutral-950);
  --foreground:            var(--neutral-100); /* 16.30:1 */
  --card:                  var(--neutral-925); /* the card, no border */
  --card-foreground:       var(--neutral-100);
  --raised:                var(--neutral-875);
  --muted:                 var(--neutral-925);
  --muted-foreground:      var(--neutral-300); /* 11.19:1 */
  --subtle-foreground:     var(--neutral-500);

  --primary:               var(--brand-600);   /* lime fill, ink label — 6.31:1 */
  --primary-foreground:    var(--neutral-950);
  --primary-hover:         var(--brand-500);
  --accent:                var(--brand-600);   /* lime as text on ink — 6.31:1 */
  --accent-foreground:     var(--neutral-950);
  --accent-muted:          var(--brand-900);

  --logo-ink:              var(--neutral-100);
  --logo-accent:           var(--brand-600);

  --data:                  var(--brand-500);
  --hairline:              rgb(255 255 255 / 7%); /* the only line in the system */
  --ring:                  var(--brand-500);
  --danger:                var(--danger-300);
  --danger-foreground:     var(--neutral-950);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -14px rgb(0 0 0 / 70%);
}

[data-theme="light"],
[data-theme-lock="light"] {
  --background:            var(--neutral-100);
  --foreground:            var(--neutral-900); /* 13.10:1 */
  --card:                  var(--neutral-0);
  --card-foreground:       var(--neutral-900);
  --raised:                var(--neutral-0);
  --muted:                 var(--neutral-200);
  --muted-foreground:      var(--neutral-700); /* 5.71:1 */
  --subtle-foreground:     var(--neutral-600);

  --primary:               var(--brand-600);   /* same lime — ink label, 6.31:1 */
  --primary-foreground:    var(--neutral-950);
  --primary-hover:         var(--brand-700);
  --accent:                var(--brand-800);   /* lime as small TEXT on light — 6.73:1 */
  --accent-foreground:     var(--neutral-0);
  --accent-muted:          var(--brand-100);

  --logo-ink:              var(--neutral-900);
  --logo-accent:           var(--brand-600);   /* the logo keeps the one colour — 2.98:1, graphics */

  --data:                  var(--brand-800);
  --hairline:              rgb(11 18 26 / 10%);
  --ring:                  var(--brand-600);
  --danger:                var(--danger-700);
  --danger-foreground:     var(--neutral-0);

  --shadow-sm: 0 1px 2px rgb(16 20 26 / 6%);
  --shadow-md: 0 1px 2px rgb(16 20 26 / 6%), 0 8px 24px -12px rgb(16 20 26 / 18%);
}