/* EGEOK Design System v2 — primitive + semantic tokens */

:root {
    /* --- Primitive: neutral --- */
    --color-white: #ffffff;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    /* --- Primitive: brand green --- */
    --color-green-50: #ecfdf5;
    --color-green-100: #d1fae5;
    --color-green-600: #059669;
    --color-green-700: #047857;
    --color-green-800: #065f46;
    --color-green-900: #0b3d1a;

    /* --- Primitive: semantic status --- */
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #b80003;
    --color-amber-100: #fef2cf;
    --color-emerald-100: #d4e7dd;
    --color-emerald-900: #14532d;

    /* --- Spacing --- */
    --egeok-space-1: 0.25rem;
    --egeok-space-2: 0.5rem;
    --egeok-space-3: 0.75rem;
    --egeok-space-4: 1rem;
    --egeok-space-5: 1.25rem;
    --egeok-space-6: 1.5rem;

    /* --- Radius --- */
    --egeok-radius-sm: 6px;
    --egeok-radius-md: 10px;
    --egeok-radius-lg: 14px;
    --egeok-radius-xl: 0.75rem;

    /* --- Typography --- */
    --egeok-font-size-xs: 0.75rem;
    --egeok-font-size-sm: 0.8125rem;
    --egeok-font-size-md: 0.875rem;
    --egeok-font-size-lg: 1rem;
    --egeok-font-size-xl: 1.25rem;
    --egeok-font-size-2xl: 1.65rem;
    --egeok-font-weight-normal: 400;
    --egeok-font-weight-medium: 500;
    --egeok-font-weight-semibold: 600;
    --egeok-font-weight-bold: 700;

    /* --- Shadow --- */
    --egeok-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --egeok-shadow-md: 0 4px 24px rgba(15, 23, 42, 0.08);
    --egeok-shadow-btn-hover: 0 4px 12px rgba(15, 23, 42, 0.12);

    /* --- Semantic: surfaces --- */
    --egeok-color-bg-canvas: var(--color-slate-50);
    --egeok-color-bg-surface: var(--color-white);
    --egeok-color-bg-muted: var(--color-slate-100);
    --egeok-color-text-primary: var(--color-slate-900);
    --egeok-color-text-secondary: var(--color-slate-700);
    --egeok-color-text-muted: var(--color-slate-500);
    --egeok-color-border-default: var(--color-slate-200);
    --egeok-color-border-subtle: rgba(15, 23, 42, 0.08);

    /* --- Semantic: actions --- */
    --egeok-color-action-primary: var(--color-slate-900);
    --egeok-color-action-primary-hover: var(--color-slate-800);
    --egeok-color-action-primary-active: var(--color-slate-950);
    --egeok-color-action-primary-disabled: var(--color-slate-500);
    --egeok-color-action-accent: var(--color-green-600);
    --egeok-color-action-accent-hover: var(--color-green-700);
    --egeok-color-accent-soft: rgba(5, 150, 105, 0.12);
    --egeok-color-focus-ring: rgba(5, 150, 105, 0.35);

    /* --- Component tokens --- */
    --egeok-btn-radius: var(--egeok-radius-md);
    --egeok-table-row-hover: rgba(15, 23, 42, 0.04);
    --egeok-table-border: var(--color-slate-200);
    --egeok-table-cell-border: #f1f3f5;
    --egeok-page-header-accent-width: 4px;

    /* --- Legacy aliases (v1 compat) --- */
    --egeok-btn: var(--egeok-color-action-primary);
    --egeok-btn-hover: var(--egeok-color-action-primary-hover);
    --egeok-btn-active: var(--egeok-color-action-primary-active);
    --egeok-btn-disabled: var(--egeok-color-action-primary-disabled);
    --egeok-accent: var(--egeok-color-action-accent);
    --egeok-accent-hover: var(--egeok-color-action-accent-hover);
    --egeok-accent-soft: var(--egeok-color-accent-soft);
    --egeok-btn-focus-ring: var(--egeok-color-focus-ring);

    /* --- Badges: status & grades --- */
    --egeok-badge-checked-bg: var(--color-emerald-100);
    --egeok-badge-checked-fg: var(--color-emerald-900);
    --egeok-badge-in-progress-bg: var(--color-amber-100);
    --egeok-badge-in-progress-fg: #1a1a1a;
    --egeok-grade-5-bg: #00c228;
    --egeok-grade-5-fg: #fff;
    --egeok-grade-4-bg: #016b16;
    --egeok-grade-4-fg: #fff;
    --egeok-grade-3-bg: var(--color-red-800);
    --egeok-grade-3-fg: #fff;
    --egeok-grade-2-bg: var(--color-red-700);
    --egeok-grade-2-fg: #fff;
    --egeok-metric-badge-bg: var(--color-slate-100);
    --egeok-metric-badge-fg: var(--color-slate-900);
    --egeok-badge-pending-review-bg: var(--color-red-800);
    --egeok-badge-pending-review-fg: #fff;
    --egeok-grade-empty-bg: #adb5bd;
    --egeok-grade-empty-fg: #fff;

    /* --- Test type badges --- */
    --egeok-test-type-hw-bg: #0dcaf0;
    --egeok-test-type-hw-fg: #052c65;
    --egeok-test-type-hw-border: rgba(5, 44, 101, 0.25);
    --egeok-test-type-pe-bg: #ffc107;
    --egeok-test-type-pe-fg: #000;
    --egeok-test-type-pe-border: rgba(0, 0, 0, 0.12);
    --egeok-test-type-tt-bg: #6c757d;
    --egeok-test-type-tt-fg: #fff;
    --egeok-test-type-tt-border: rgba(0, 0, 0, 0.12);

    /* --- Legacy surface aliases (teacher lists) --- */
    --tl-canvas-bg: var(--egeok-color-bg-canvas);
    --tl-row-hover: var(--egeok-table-row-hover);
    --tl-border: var(--egeok-color-border-subtle);
    --tl-surface: var(--egeok-color-bg-surface);
    --tl-surface-edge: var(--egeok-color-border-subtle);

    /* --- Bootstrap bridge --- */
    --bs-primary: var(--egeok-color-action-primary);
    --bs-primary-rgb: 15, 23, 42;
    --bs-link-color: var(--egeok-color-action-accent);
    --bs-link-hover-color: var(--egeok-color-action-accent-hover);
    --bs-border-radius: var(--egeok-btn-radius);
    --bs-border-radius-sm: var(--egeok-radius-sm);
    --bs-border-radius-lg: var(--egeok-radius-lg);
}

body.home-fresh {
    --hf-accent: var(--egeok-accent);
    --hf-accent-soft: var(--egeok-accent-soft);
}