/* ============================================================
   WHITE WORLD — design tokens (source of truth)
   Specification: docs/design-system/WHITE_WORLD_DESIGN_SYSTEM.md
   Active when <html data-visual-system="white-world">; the selector below outranks
   the Klockner profile (:root[data-design-system="klockner"]) without editing it.
   ============================================================ */
:root[data-visual-system="white-world"][data-design-system] {
    color-scheme: light;

    /* ---- Neutral ramp: cool bias (~250°); ink is never pure black ---- */
    --ww-n-0: #ffffff;
    --ww-n-25: #f8f9fa;
    --ww-n-50: #f3f4f6;
    --ww-n-100: #eaecf0;
    --ww-n-150: #e4e7ec;
    --ww-n-200: #d3d8df;
    --ww-n-300: #b8bfc9;
    --ww-n-400: #98a0ab;
    --ww-n-500: #7a838f;
    --ww-n-600: #5b6470;
    --ww-n-700: #3f4650;
    --ww-n-800: #2a2f36;
    --ww-n-900: #15181c;

    /* ---- Turquoise ramp: selection, focus, links, progress, the case ---- */
    --ww-t-25: #f3fbfc;
    --ww-t-50: #e8f7f9;
    --ww-t-100: #cdeff3;
    --ww-t-200: #9fdde6;
    --ww-t-300: #63c6d3;
    --ww-t-400: #26abbd;
    --ww-t-500: #0a94a6;
    --ww-t-600: #067887;   /* text, links and primary: 5.2:1 on white, 4.7:1 on the canvas and on turquoise 50 */
    --ww-t-700: #066470;   /* text on turquoise-50/100 */
    --ww-t-800: #0a4e57;
    --ww-t-900: #0b3b42;

    /* ---- Semantic triplets at matched lightness ---- */
    --ww-ok-bg: #e9f6ef;   --ww-ok-border: #b7e2c9;   --ww-ok-text: #17784f;   --ww-ok-solid: #1e9e6a;
    --ww-warn-bg: #fdf4e3; --ww-warn-border: #f3d59c; --ww-warn-text: #8a5500; --ww-warn-solid: #d18a0c;
    --ww-err-bg: #fcecea;  --ww-err-border: #f2bdb8;  --ww-err-text: #a8322b;  --ww-err-solid: #d1433b;
    --ww-info-bg: var(--ww-t-25); --ww-info-border: var(--ww-t-100); --ww-info-text: var(--ww-t-800); --ww-info-solid: var(--ww-t-500);

    /* ---- Categorical (charts, avatars): six hues at L≈92 bg / L≈35 text ---- */
    --ww-cat-1-bg: #e3f1f4; --ww-cat-1: #0a5561;
    --ww-cat-2-bg: #eceaf6; --ww-cat-2: #463d86;
    --ww-cat-3-bg: #f6ece3; --ww-cat-3: #7a4a1c;
    --ww-cat-4-bg: #e7f2e8; --ww-cat-4: #2d6536;
    --ww-cat-5-bg: #f5e7ec; --ww-cat-5: #83304b;
    --ww-cat-6-bg: #eceef1; --ww-cat-6: #3f4650;

    /* ---- Roles ---- */
    --ww-canvas: var(--ww-n-50);
    --ww-surface: var(--ww-n-0);
    --ww-surface-raised: var(--ww-n-0);
    --ww-sunken: var(--ww-n-100);
    --ww-hover: var(--ww-n-50);
    --ww-row-hover: var(--ww-n-25);
    --ww-selected: var(--ww-t-50);
    --ww-selected-strong: var(--ww-t-100);
    --ww-border: var(--ww-n-150);
    --ww-border-strong: var(--ww-n-200);
    --ww-border-hover: var(--ww-n-300);
    --ww-text: var(--ww-n-900);
    --ww-text-2: var(--ww-n-600);
    --ww-text-3: var(--ww-n-500);
    --ww-text-disabled: var(--ww-n-400);
    --ww-icon: var(--ww-n-600);
    --ww-link: var(--ww-t-600);
    --ww-accent: var(--ww-t-500);
    --ww-action: var(--ww-t-600);          /* the one primary action per view: turquoise (5.2:1 with white) */
    --ww-action-hover: var(--ww-t-700);
    --ww-action-active: var(--ww-t-800);
    --ww-ink: var(--ww-n-900);             /* strong neutral: text, dark chips, toasts */
    --ww-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ww-t-400) 40%, transparent);

    /* ---- Type ---- */
    --ww-font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --ww-font-ui: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    --ww-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;  /* code and IDs only */
    --ww-display-stretch: 82%;
    --ww-fs-12: 12px; --ww-fs-13: 13px; --ww-fs-14: 14px; --ww-fs-16: 16px;
    --ww-fs-17: 17px; --ww-fs-20: 20px; --ww-fs-22: 22px; --ww-fs-28: 28px; --ww-fs-32: 32px;
    --ww-lh-tight: 1.15; --ww-lh-snug: 1.3; --ww-lh-body: 1.5;
    --ww-fw-regular: 400; --ww-fw-medium: 500; --ww-fw-semibold: 600; --ww-fw-bold: 700;

    /* ---- Space (4px grid) ---- */
    --ww-s-1: 4px; --ww-s-2: 8px; --ww-s-3: 12px; --ww-s-4: 16px; --ww-s-5: 20px;
    --ww-s-6: 24px; --ww-s-8: 32px; --ww-s-10: 40px; --ww-s-14: 56px;

    /* ---- Layout rhythm: every page and overlay draws its spacing from here ----
       Four distances, each one step apart, so proximity reads as grouping:
       inline (8) < stack (12) < block (16) < section (32).                      */
    --ww-page-x: 32px;          /* side margin of the content frame (24 tablet, 16 phone) */
    --ww-page-top: 24px;        /* top bar -> page header */
    --ww-page-bottom: 56px;     /* air after the last block */
    --ww-content-max: 1440px;   /* the frame never grows past this; centred beyond */
    --ww-header-gap: 24px;      /* page header -> first block */
    --ww-section-gap: 32px;     /* between unrelated sections */
    --ww-block-gap: 16px;       /* between cards/blocks of one section */
    --ww-stack-gap: 12px;       /* between items inside a block */
    --ww-inline-gap: 8px;       /* between controls in a row */
    --ww-card-pad: 20px;        /* card body */
    --ww-card-pad-y: 16px;      /* card header / footer */
    --ww-modal-pad: 24px;       /* modal body; header 20, footer 16 */
    --ww-field-gap: 16px;       /* between form fields */

    /* ---- Sizes ---- */
    --ww-control-sm: 30px; --ww-control: 36px; --ww-control-lg: 44px; --ww-field: 38px;
    --ww-row: 56px; --ww-row-compact: 44px;
    --ww-rail: 64px; --ww-rail-open: 248px; --ww-topbar: 56px;
    --ww-icon-sm: 14px; --ww-icon-md: 16px; --ww-icon-lg: 20px; --ww-icon-xl: 24px;

    /* ---- Shape ---- */
    --ww-r-control: 6px; --ww-r-inner: 8px; --ww-r-card: 12px; --ww-r-overlay: 12px; --ww-r-pill: 999px;
    --ww-chamfer: 9px;   /* the only facet: primary action corner */

    /* ---- Depth: soft and cool ---- */
    --ww-e1: 0 1px 2px rgb(21 24 28 / .05);
    --ww-e2: 0 1px 2px rgb(21 24 28 / .06), 0 8px 24px rgb(21 24 28 / .08);
    --ww-e3: 0 2px 4px rgb(21 24 28 / .08), 0 24px 48px rgb(21 24 28 / .16);

    /* ---- Motion ---- */
    --ww-ease: cubic-bezier(.2, .8, .2, 1);
    --ww-t-fast: 120ms; --ww-t-base: 180ms; --ww-t-slow: 280ms;

    /* ---- Z ---- */
    --ww-z-rail: 300; --ww-z-flyout: 1060; --ww-z-toast: 1090;

    /* ============ Existing design-system tokens remapped ============ */
    --color-brand: var(--ww-action);
    --color-brand-hover: var(--ww-action-hover);
    --color-brand-active: var(--ww-action-active);
    --color-brand-subtle: var(--ww-selected);
    --color-brand-muted: var(--ww-selected);
    --color-brand-border: var(--ww-t-200);
    --color-accent-hot: var(--ww-accent);
    --color-accent-hot-bg: var(--ww-selected);
    --color-bg-canvas: var(--ww-canvas);
    --color-bg-surface: var(--ww-surface);
    --color-bg-elevated: var(--ww-surface);
    --color-bg-hover: var(--ww-hover);
    --color-bg-active: var(--ww-selected);
    --color-bg-disabled: var(--ww-sunken);
    --color-text-primary: var(--ww-text);
    --color-text-secondary: var(--ww-text-2);
    --color-text-muted: var(--ww-text-3);
    --color-text-brand: var(--ww-link);
    --color-text-inverse: #fff;
    --color-heading: var(--ww-text);
    --color-border: var(--ww-border);
    --color-border-strong: var(--ww-border-strong);
    --color-border-brand: var(--ww-t-300);
    --color-border-focus: var(--ww-t-500);
    --color-focus-ring: color-mix(in srgb, var(--ww-t-400) 40%, transparent);
    --color-success: var(--ww-ok-solid);
    --color-warning: var(--ww-warn-solid);
    --color-error: var(--ww-err-solid);
    --color-info: var(--ww-info-solid);
    --color-sidebar-bg: var(--ww-surface);
    --color-sidebar-border: var(--ww-border);
    --color-sidebar-hover: var(--ww-hover);
    --color-sidebar-active-bg: var(--ww-selected);
    --color-sidebar-active-bar: var(--ww-accent);
    --color-sidebar-text: var(--ww-text);
    --color-sidebar-text-muted: var(--ww-text-3);
    --color-sidebar-icon: var(--ww-icon);
    --color-topbar-bg: var(--ww-surface);
    --color-topbar-bg-end: var(--ww-surface);
    --color-topbar-border: var(--ww-border);
    --color-topbar-text: var(--ww-text);
    --font-sans: var(--ww-font-ui);
    --font-heading: var(--ww-font-ui);
    --font-body: var(--ww-font-ui);
    --font-mono: var(--ww-font-mono);
    --radius-xs: 4px; --radius-sm: var(--ww-r-control); --radius-md: var(--ww-r-control);
    --radius-lg: var(--ww-r-card); --radius-xl: var(--ww-r-card); --radius-2xl: var(--ww-r-card); --radius-3xl: var(--ww-r-card);
    --shadow-xs: var(--ww-e1); --shadow-sm: var(--ww-e1); --shadow-md: var(--ww-e2);
    --shadow-lg: var(--ww-e2); --shadow-xl: var(--ww-e3); --shadow-2xl: var(--ww-e3); --shadow-brand: var(--ww-e2);
    /* legacy scale: the half steps (10, 14 px) snap to the 4 px grid */
    --space-2-5: 12px; --space-3-5: 16px;
    --layout-content-padding: var(--ww-page-x);
    --layout-content-max-width: var(--ww-content-max);
    --layout-sidebar-collapsed-width: var(--ww-rail);
    --layout-sidebar-width: var(--ww-rail-open);
    --layout-topbar-height: var(--ww-topbar);

    /* Bootstrap 5 */
    --bs-body-bg: var(--ww-canvas);
    --bs-body-color: var(--ww-text);
    --bs-body-font-family: var(--ww-font-ui);
    --bs-body-font-size: var(--ww-fs-14);
    --bs-border-color: var(--ww-border);
    --bs-border-radius: var(--ww-r-control);
    --bs-border-radius-sm: var(--ww-r-control);
    --bs-border-radius-lg: var(--ww-r-card);
    --bs-primary: #067887;
    --bs-primary-rgb: 6, 120, 135;
    --bs-link-color: var(--ww-link);
    --bs-link-color-rgb: 6, 120, 135;
    --bs-link-hover-color: var(--ww-t-700);
    --bs-success: var(--ww-ok-solid);
    --bs-warning: var(--ww-warn-solid);
    --bs-danger: var(--ww-err-solid);
    --bs-info: var(--ww-info-solid);
}
@media (max-width: 1199px) { :root[data-visual-system="white-world"][data-design-system] { --ww-page-x: 24px; --ww-section-gap: 28px; } }
@media (max-width: 767px) {
    :root[data-visual-system="white-world"][data-design-system] { --ww-page-x: 16px; --ww-page-top: 16px; --ww-page-bottom: 40px; --ww-header-gap: 20px; --ww-section-gap: 24px; --ww-card-pad: 16px; --ww-modal-pad: 16px; }
}