/* ==========================================================================
   Design Tokens - KS21 Lizenzportal
   Single source of truth for color, type, radius, shadow and spacing.
   Palette is shared with the KS21 Verwaltung (mgm/Management-Api/wwwroot/css/app.css)
   so both products look like one family. See DESIGN_CATALOG.md for usage rules.

   Rule: markup and CSS read these variables, never literal hex values.
   ========================================================================== */
:root {
    /* Brand accent (orange, from the logo) - identical to KS21 Verwaltung */
    --color-accent: #f97316;
    --color-accent-rgb: 249, 115, 22;
    --color-accent-hover: #ea580c;
    --color-accent-active: #c2410c;
    --color-accent-lighter: #fff7ed;
    --color-accent-light: #ffedd5;
    --color-accent-contrast: #ffffff;
    /* Portal addition: accent used as TEXT on white (links, active tab label).
       #f97316 on white is only 2.8:1 - #c2410c reaches 5.2:1 (WCAG AA). */
    --color-accent-text: #c2410c;

    /* Neutral surfaces & text (light theme) - identical to KS21 Verwaltung */
    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --color-surface-alt: #f3f4f6;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-text: #111827;
    --color-text-secondary: #374151;
    --color-text-muted: #6b7280;
    --color-text-faint: #9ca3af;

    /* Semantic status colors - identical to KS21 Verwaltung */
    --color-success: #10b981;
    --color-success-strong: #047857;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    --color-tag-purple: #9333ea;

    /* Portal addition: soft status pairs for badges/alerts (bg + readable text + border) */
    --color-success-soft: #ecfdf5;
    --color-success-text: #047857;
    --color-success-border: #a7f3d0;
    --color-warning-soft: #fffbeb;
    --color-warning-text: #b45309;
    --color-warning-border: #fde68a;
    --color-danger-soft: #fef2f2;
    --color-danger-text: #b91c1c;
    --color-danger-border: #fecaca;
    --color-info-soft: #eff6ff;
    --color-info-text: #1d4ed8;
    --color-info-border: #bfdbfe;
    --color-neutral-soft: #f3f4f6;
    --color-neutral-text: #4b5563;
    --color-neutral-border: #e5e7eb;

    /* Overlay behind modal dialogs */
    --color-overlay: rgba(17, 24, 39, 0.45);

    /* Typography */
    --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* The actual rem root - set on <html> in components.css. Every OTHER rem value
       in the app (icon sizes, --radius-*, Tailwind spacing/gaps, button/input
       heights, ...) resolves against this, so it is the one number that scales
       "boxes" - paddings, icon tiles, table row height - app-wide, independent of
       the --text-* sizes below (which are plain px, not rem, on purpose - see
       DESIGN_CATALOG.md §4). 17.6px = 16px * 1.1: "boxes ~10% bigger, like a 110%
       browser zoom", chosen because it read better than the browser default. */
    --root-font-size: 17.6px;

    /* Text sizes - plain px, deliberately NOT tied to --root-font-size above, so
       "make the boxes bigger" and "make the text bigger/smaller" can be tuned
       independently. Trimmed slightly below the nominal 12/13/14/15/18/22px scale
       this app started from - the bigger --root-font-size alone already made text
       read a shade large. */
    --text-2xs: 10px;   /* nav section labels, menu section labels, tiny count badges */
    --text-xs: 11px;    /* meta, table header, badge */
    --text-sm: 12px;    /* secondary text, table cells */
    --text-base: 13px;  /* body default */
    --text-md: 14px;    /* card titles */
    --text-lg: 17px;    /* dialog titles */
    --text-xl: 20px;    /* page titles */

    /* Radius */
    --radius-sm: 0.375rem;  /* 6px - badges, chips, inputs */
    --radius-md: 0.5rem;    /* 8px - buttons */
    --radius-lg: 0.75rem;   /* 12px - cards, dialogs */

    /* Elevation - deliberately flat; borders do the separating */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 8px 16px -4px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 20px 32px -8px rgba(16, 24, 40, 0.18), 0 6px 12px -6px rgba(16, 24, 40, 0.08);
    --focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);

    /* Layout */
    --topbar-height: 3.5rem;      /* 56px */
    --content-max-width: 90rem;   /* 1440px */

    /* Legacy aliases (pre-redesign ks21-colors.css). Kept so untouched markup
       keeps rendering; do not use in new code - use the tokens above. */
    --ks21-primary: var(--color-bg);
    --ks21-secondary: var(--color-border-strong);
    --ks21-disabled: var(--color-surface-alt);
    --ks21-highlight: var(--color-accent);
    --ks21-light-highlight: var(--color-accent-light);
    --ks21-light: var(--color-surface);
    --ks21-dark: var(--color-text-secondary);
    --ks21-hover: var(--color-surface-alt);
    --ks21-border-default: var(--color-border);
    --ks21-text-primary: var(--color-text-secondary);
    --ks21-text-secondary: var(--color-text-muted);
    --ks21-text-highlight: var(--color-accent-text);
    --ks21-text-light: #ffffff;
    --ks21-text-dark: var(--color-text);
    --ks21-text-link: var(--color-accent-text);
    --ks21-text: var(--color-text-secondary);

    color-scheme: light;
}

/* Dark theme - values identical to KS21 Verwaltung. Not yet switchable in the
   portal (no toggle wired up), see DESIGN_CATALOG.md "Backlog". */
:root[data-theme="dark"] {
    --color-accent: #fb923c;
    --color-accent-rgb: 251, 146, 60;
    --color-accent-hover: #f97316;
    --color-accent-active: #ea580c;
    --color-accent-lighter: #431407;
    --color-accent-light: #7c2d12;
    --color-accent-contrast: #1c1006;
    --color-accent-text: #fb923c;

    --color-bg: #15171b;
    --color-surface: #1e2126;
    --color-surface-alt: #262a31;
    --color-border: #33373e;
    --color-border-strong: #454a52;
    --color-text: #e5e7eb;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #9ca3af;
    --color-text-faint: #71767f;

    --color-success: #34d399;
    --color-success-strong: #6ee7b7;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #60a5fa;
    --color-tag-purple: #c084fc;

    --color-success-soft: rgba(16, 185, 129, 0.15);
    --color-success-text: #6ee7b7;
    --color-success-border: rgba(16, 185, 129, 0.35);
    --color-warning-soft: rgba(245, 158, 11, 0.15);
    --color-warning-text: #fcd34d;
    --color-warning-border: rgba(245, 158, 11, 0.35);
    --color-danger-soft: rgba(239, 68, 68, 0.15);
    --color-danger-text: #fca5a5;
    --color-danger-border: rgba(239, 68, 68, 0.35);
    --color-info-soft: rgba(59, 130, 246, 0.15);
    --color-info-text: #93c5fd;
    --color-info-border: rgba(59, 130, 246, 0.35);
    --color-neutral-soft: #262a31;
    --color-neutral-text: #cbd5e1;
    --color-neutral-border: #33373e;

    --color-overlay: rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}