/* ============================================================================
   Platform V2 — Design Tokens
   Single source of truth for colors, spacing, typography, radii, shadows.
   Loaded BEFORE all other CSS so :root variables are available everywhere.
   ============================================================================ */

:root {
    /* === Typography === */
    --font-sans-v2: 'e-Ukraine', sans-serif;
    --text-base: 15px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-lg: 17px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --heading-weight: 600;

    /* === Spacing scale === */
    --s-1: 2px;
    --s-2: 4px;
    --s-3: 6px;
    --s-4: 8px;
    --s-5: 12px;
    --s-6: 16px;
    --s-7: 20px;
    --s-8: 24px;
    --s-9: 32px;
    --s-10: 40px;
    --s-12: 56px;

    /* === Radii === */
    --r-xs: 3px;
    --r-sm: 5px;
    --r-md: 7px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-pill: 999px;

    /* === Warm paper canvas (default theme; values match the retired
       admin_shell_live.css :root which used to override these) === */
    --bg-app: #fbfaf7;
    --bg-card: #ffffff;
    --bg-subtle: #f5f4f0;
    --bg-muted: #efede8;
    --bg-hover: #f2f0eb;
    --bg-selected: #ecf0ea;
    --bg-zebra: #faf8f4;

    /* === Text === */
    --text-primary: #1a1a19;
    --text-secondary: #5a5a57;
    --text-tertiary: #8a8a86;
    --text-muted: #a8a8a4;
    --text-inverse: #ffffff;

    /* === Borders === */
    --border-subtle: #ecebe6;
    --border-light: #e2e0d9;
    --border-default: #d5d3cb;
    --border-strong: #b5b3ab;

    /* === Forest accent (default) === */
    --accent: #3f8a4d;
    --accent-hover: #326f3e;
    --accent-bg: #edf8e9;
    --accent-bg-strong: #dff3d7;
    --accent-text: #245a31;

    /* === Semantic === */
    --success: #2f7a3e;
    --success-bg: #e9f3ea;
    --warning: #a86b1e;
    --warning-bg: #faf0df;
    --danger: #a43232;
    --danger-bg: #f7e8e5;
    --info: #2f5a7a;
    --info-bg: #e6eef5;

    /* === Shadows === */
    --shadow-xs-v2: 0 1px 2px rgba(26, 26, 25, 0.04);
    --shadow-sm-v2: 0 1px 3px rgba(26, 26, 25, 0.06), 0 1px 2px rgba(26, 26, 25, 0.03);
    --shadow-md-v2: 0 4px 12px rgba(26, 26, 25, 0.06), 0 1px 3px rgba(26, 26, 25, 0.04);
    --shadow-lg-v2: 0 12px 28px rgba(26, 26, 25, 0.08), 0 2px 6px rgba(26, 26, 25, 0.04);

    /* === Focus ring === */
    --focus-ring: 0 0 0 3px rgba(63, 138, 77, 0.18);

    /* === Layout === */
    --sidebar-width: 220px;
    --topstrip-height: 44px;
    --row-height: 34px;
    --row-padding-y: 8px;
    --row-padding-x: 10px;

    /* === Legacy aliases (for backwards-compat with old CSS rules) === */
    --color-primary: var(--accent);
    --color-primary-hover: var(--accent-hover);
    --color-primary-soft: var(--accent-bg);
    --color-primary-border: var(--accent-bg-strong);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-secondary);
    --color-text-subtle: var(--text-tertiary);
    --color-bg: var(--bg-card);
    --color-bg-subtle: var(--bg-subtle);
    --color-bg-muted: var(--bg-muted);
    --color-border: var(--border-light);
    --color-border-strong: var(--border-default);
    --color-success: var(--success);
    --color-success-soft: var(--success-bg);
    --color-warning: var(--warning);
    --color-warning-soft: var(--warning-bg);
    --color-danger: var(--danger);
    --color-danger-soft: var(--danger-bg);

    /* Old typography aliases */
    --font-sans: var(--font-sans-v2);
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;

    /* Old spacing aliases */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* Old radius aliases */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;

    /* Old shadow aliases */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
}

/* === Cool theme variant === */
[data-temp="cool"] {
    --bg-app: #f7f8fa;
    --bg-card: #ffffff;
    --bg-subtle: #f1f3f6;
    --bg-muted: #e9ecf1;
    --bg-hover: #edf0f4;
    --bg-zebra: #f7f9fc;
    --text-primary: #141518;
    --text-secondary: #535762;
    --text-tertiary: #858995;
    --border-subtle: #eaecf0;
    --border-light: #dfe2e7;
    --border-default: #cfd3db;
}

/* === Neutral theme variant === */
[data-temp="neutral"] {
    --bg-app: #fafafa;
    --bg-card: #ffffff;
    --bg-subtle: #f4f4f4;
    --bg-muted: #ededed;
    --bg-hover: #f0f0f0;
    --bg-zebra: #f9f9f9;
    --border-subtle: #ededeb;
    --border-light: #e0e0de;
    --border-default: #cfcfcc;
}

/* === Accent variants === */
[data-accent="forest"] { --accent:#3f8a4d; --accent-hover:#326f3e; --accent-bg:#edf8e9; --accent-bg-strong:#dff3d7; --accent-text:#245a31; --focus-ring:0 0 0 3px rgba(63,138,77,.18); }
[data-accent="indigo"] { --accent:#3a4b7a; --accent-hover:#2f3e66; --accent-bg:#ecf0f9; --accent-bg-strong:#d7dff1; --accent-text:#26335a; --focus-ring:0 0 0 3px rgba(58,75,122,.18); }
[data-accent="clay"]   { --accent:#a15a3a; --accent-hover:#854a2f; --accent-bg:#f8eee7; --accent-bg-strong:#efd9c9; --accent-text:#7a4028; --focus-ring:0 0 0 3px rgba(161,90,58,.2); }
[data-accent="slate"]  { --accent:#3a3a3a; --accent-hover:#1f1f1f; --accent-bg:#eeeeec; --accent-bg-strong:#dcdcd8; --accent-text:#1a1a1a; --focus-ring:0 0 0 3px rgba(58,58,58,.18); }
[data-accent="teal"]   { --accent:#2f6a6a; --accent-hover:#235454; --accent-bg:#e6f0f0; --accent-bg-strong:#c8dede; --accent-text:#1e4848; --focus-ring:0 0 0 3px rgba(47,106,106,.18); }

/* === Density variants === */
[data-density="compact"]     { --row-height:30px; --row-padding-y:5px; --row-padding-x:8px; --s-6:12px; --s-7:14px; --s-8:18px; --s-9:24px; }
[data-density="comfortable"] { --row-height:42px; --row-padding-y:12px; --row-padding-x:14px; }
