/* variables.css — this theme's tokens. Every component reads them, so reskinning the site is editing this file. */
:root {
    /* palette */
    --page-bg:   #f9f9f9;   /* page surface: the old site's ground */
    --ink:       #222;      /* primary text + borders */
    --muted-share: 70%;     /* how much of the ink secondary text keeps, in every look (70% reads at WCAG AA) */
    --muted:     color-mix(in srgb, var(--ink) var(--muted-share), var(--page-bg));   /* secondary text: the ink faded toward the ground, so it stays readable (WCAG AA) on any ground */
    --accent:    #007b9a;   /* the Mahila Haat teal: the bar, the menu, the side boxes */
    --invert-bg: #0d0f14;   /* dark sections */
    --invert-fg: #f4f6fb;   /* text on dark sections */
    --brand-red: var(--accent);   /* the brand mark / ✺ next to the wordmark: the accent until it gets its own */
    /* mahilahaat.dk, as it was: the dashed rule beside the text, the indent line, the side boxes' and tabs' textures */
    --mh-rule:      #ddd;
    --mh-indent:    #eee;
    --mh-on-teal:   #fff;
    --mh-caption:   #5b6670;   /* captions and dates: quieter than the text, still readable (WCAG AA on the page) */
    --mh-backdrop:  url('/media/mahilahaat/baggrund.jpg');
    --mh-box-bg:    url('/media/mahilahaat/info-baggrund.jpg');
    --mh-tab-bg:    url('/media/mahilahaat/menu-baggrund.jpg');

    /* type (faces in fonts.css) */
    --font-display: 'Open Sans', Arial, Helvetica, sans-serif;   /* headings */
    --font-text:    'Open Sans', Arial, Helvetica, sans-serif;   /* body */
    --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;  /* labels / chrome */
    --font-gotham:  'GothamSSm', system-ui, sans-serif;         /* topbar / chrome wordmark */

    /* the type scale: seven steps and a floor (--text-min); every component reads a step */
    --text-min:  0.6875rem;  /* 11px — the absolute floor for anything a reader must read */
    --text-xs:   0.75rem;    /* 12px — the smallest a SENTENCE may be set */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px — body default */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   clamp(1.25rem, 1.6vw, 1.5rem);
    --text-xl:   clamp(1.75rem, 3vw, 2.5rem);
    --text-display: clamp(2.5rem, 7vw, 6rem);
    /* micro-labels (eyebrows, spec keys, chrome): tracked caps at the floor, never below it */
    --text-label: var(--text-min);
    --track-label: 0.08em;
    /* line-height floor: prose under 1.25 reads as crammed (the audit flags it) */
    --leading-tight: 1.15;   /* display only */
    --leading-body:  1.55;
    --measure: 68ch;         /* prose column cap — 45–85 characters is the readable window */

    /* space & shape */
    --space:  clamp(2rem, 5vw, 5rem);   /* section padding */
    --gap:    2vw;                       /* grid gap between nodes */
    --radius: 1vh;

    /* the kit contract tokens (docs/kit-theme-contract.md): every kit block reads them, derived from the palette */

    /* surfaces: the page ground, the lifted card/panel on it, and a faint tinted surface between */
    --surround-bg: var(--page-bg);                                  /* revealed when the stage insets */
    --paper:   color-mix(in srgb, var(--page-bg) 88%, #fff);        /* card / panel fill */
    --card:    var(--paper);
    --panel:   var(--paper);
    --surface: color-mix(in srgb, var(--ink) 4%, var(--paper));     /* faint tint: table heads, wells */

    /* ink: three weights below --ink, all derived so a palette change carries them */
    --body:  color-mix(in srgb, var(--ink) 82%, var(--page-bg));
    --faint: color-mix(in srgb, var(--ink) 42%, var(--page-bg));

    /* the one brand mark + legible ink ON it (kit components read --accent-ink / --on-accent): derived from the
       accent's own lightness, near-black on a light accent and near-white on a dark one, so any accent stays readable */
    --accent-ink: oklch(from var(--accent) clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h);   /* 0.6: where light and dark ink read alike */
    --on-accent:  var(--accent-ink);

    /* hairlines */
    --line:        color-mix(in srgb, var(--ink) 14%, transparent);
    --rule:        var(--line);
    --rule-strong: color-mix(in srgb, var(--ink) 34%, transparent);

    /* radii — kit blocks ask for a scale, not one value; all hang off --radius */
    --r-sm:   calc(var(--radius) * 0.5);
    --r:      var(--radius);
    --r-md:   var(--radius);
    --r-lg:   calc(var(--radius) * 1.6);
    --r-pill: 61.25rem;

    /* elevation — tinted with the theme's ink so a shadow never reads as a grey smudge on a warm page */
    --shadow-card:  0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, var(--ink) 18%, transparent);
    --shadow-card-hover: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent),
                    0 18px 40px -16px color-mix(in srgb, var(--ink) 24%, transparent);
    --shadow-panel: 0 50px 100px -20px color-mix(in srgb, var(--ink) 22%, transparent),
                    0 30px 60px -30px color-mix(in srgb, var(--ink) 26%, transparent);

    /* motion — one easing every kit component defers to */
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* the SVG effects' colours (effects/barChart, countRing, drawPath, timeline) on the palette */
    --bc-bar: var(--ink);  --bc-label: var(--muted);  --bc-value: var(--ink);
    --cr-arc: var(--accent);  --cr-track: color-mix(in srgb, var(--ink) 10%, transparent);
    --cr-num: var(--ink);  --cr-label: var(--muted);
    --dp-stroke: var(--ink);
    --tlsvg-ink: var(--ink);

    /* the page-transition wipe (behaviors/pageWipe.js) — one line makes it wear the theme */
    --wipe-bg: var(--invert-bg);
}