/* ==========================================================================
   BASIKNET Tools – Design-Tokens · Konzept „Knotenpunkt“
   Abgeleitet aus der BASIKNET-Markenfamilie (Weltkugel-Verlauf, Produkt-Cyan,
   DEMANDU-Puzzlefarben, Manrope wie auf basiknet.de).
   Die einzige Stelle für Farben, Schrift, Formen und Bewegung – Module nutzen
   ausschließlich diese Variablen.
   ========================================================================== */

:root {
    /* --- Markenfarben ------------------------------------------------------ */
    --ink: #0b1424;            /* Nachtblau – Seitenleiste, Hero, Toasts */
    --ink-2: #13223b;
    --navy-800: #14365d;       /* basiknet.de */
    --navy: #184e99;           /* BASIKNET-Wortmarke – Primärfarbe */
    --navy-600: #1a529c;       /* Verlauf Start (Weltkugel) */
    --blue: #378bb9;           /* Verlauf Mitte */
    --cyan: #018ab8;           /* Produkt-Cyan basik-net / basik-pro */
    --cyan-400: #4ab6ce;       /* Verlauf Ende (Weltkugel) */
    --cyan-100: #e2f3f8;

    --gradient-brand: linear-gradient(120deg, #1a529c 0%, #378bb9 55%, #4ab6ce 100%);
    /* Für Flächen mit weißer Schrift (Chip, Datum, Haken): dunkler, damit der Kontrast ≥ 4,5 : 1 bleibt */
    --gradient-brand-strong: linear-gradient(120deg, #1a529c 0%, #1d68a6 100%);
    --gradient-brand-text: linear-gradient(100deg, #6fd3e8 0%, #4ab6ce 40%, #9fd9ff 100%);
    --gradient-ink: radial-gradient(120% 90% at 100% 0%, rgba(74, 182, 206, .22) 0%, transparent 55%),
                    radial-gradient(90% 80% at 0% 100%, rgba(26, 82, 156, .45) 0%, transparent 60%),
                    linear-gradient(160deg, #0f1d33 0%, #0b1424 60%);

    /* --- Schrift --------------------------------------------------------- */
    --font: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
    --text-xs: .72rem;
    --text-sm: .84rem;
    --text-base: .94rem;
    --text-lg: 1.12rem;
    --text-xl: 1.9rem;
    --text-2xl: 2.4rem;
    --tracking-tight: -.028em;
    --tracking-wide: .16em;    /* Großbuchstaben-Labels wie „EINFACH. SICHER. DIGITAL.“ */

    /* --- Neutrale Flächen (kühl, leicht ins Navy) ------------------------- */
    --bg: #f2f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #edf1f6;
    --border: #e2e8f0;
    --border-strong: #cfd8e3;      /* Buttons, Trenner */
    --border-control: #848fa3;     /* Ränder von Eingabefeldern: ≥ 3 : 1 (WCAG 1.4.11) */
    --hairline: rgba(15, 27, 45, .07);
    --text: #0f1b2d;
    --text-2: #3c4a5f;
    --muted: #5a697e;              /* ≥ 4,5 : 1 auf allen hellen Flächen */
    --faint: #848fa3;              /* nur Icons/Deko, nicht für Text */
    --placeholder: #687689;

    /* --- Bedeutung --------------------------------------------------------- */
    --primary: var(--navy);
    --primary-hover: #1f5fb4;
    --primary-soft: #e8f0fb;
    --link: #0a6f96;            /* Cyan, dunkel genug für Text (AA) */
    --focus-ring: rgba(1, 138, 184, .28);
    --success: #067250;
    --success-soft: #e6f6ef;
    --success-border: #b7e6d1;
    --warning: #9a4b04;         /* Text auf hellem Grund */
    --warning-accent: #f39319;  /* DEMANDU-Orange für Markierungen */
    --warning-soft: #fff4e5;
    --warning-border: #fbd7a4;
    --danger: #cf1e29;          /* DEMANDU-Rot */
    --danger-soft: #fdecec;

    /* --- Modul-Akzente: die Puzzle-Palette aus DEMANDU + Produkt-Cyan ----- */
    --accent-cyan: #018ab8;   --accent-cyan-soft: #e2f3f8;
    --accent-navy: #184e99;   --accent-navy-soft: #e8f0fb;
    --accent-orange: #b9600a; --accent-orange-soft: #fff1e0;
    --accent-red: #cf1e29;    --accent-red-soft: #fdecec;
    --accent-yellow: #8a7200; --accent-yellow-soft: #fdf8d8;
    --accent-teal: #3f8f87;   --accent-teal-soft: #e5f3f1;
    --accent-pink: #d14771;   --accent-pink-soft: #fceaf0;
    --accent-slate: #424360;  --accent-slate-soft: #ececf3;

    /* --- Abstände (4er-Raster) ------------------------------------------- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* --- Formen ------------------------------------------------------------ */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(15, 27, 45, .06);
    --shadow-sm: 0 1px 3px rgba(15, 27, 45, .06), 0 1px 2px rgba(15, 27, 45, .03);
    --shadow: 0 10px 28px -12px rgba(15, 27, 45, .18), 0 2px 6px -2px rgba(15, 27, 45, .06);
    --shadow-lg: 0 24px 48px -16px rgba(11, 20, 36, .32);
    --shadow-glow: 0 10px 26px -8px rgba(1, 138, 184, .55);

    /* --- Bewegung ------------------------------------------------------------ */
    --duration: .18s;
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* --- Raster ---------------------------------------------------------------- */
    --sidebar: 264px;
    --content-max: 1160px;
    --control-h: 44px;
}

/* Akzent eines Moduls: <article class="accent-orange"> … nutzt var(--accent) */
.accent-cyan   { --accent: var(--accent-cyan);   --accent-soft: var(--accent-cyan-soft); }
.accent-navy   { --accent: var(--accent-navy);   --accent-soft: var(--accent-navy-soft); }
.accent-orange { --accent: var(--accent-orange); --accent-soft: var(--accent-orange-soft); }
.accent-red    { --accent: var(--accent-red);    --accent-soft: var(--accent-red-soft); }
.accent-yellow { --accent: var(--accent-yellow); --accent-soft: var(--accent-yellow-soft); }
.accent-teal   { --accent: var(--accent-teal);   --accent-soft: var(--accent-teal-soft); }
.accent-pink   { --accent: var(--accent-pink);   --accent-soft: var(--accent-pink-soft); }
.accent-slate  { --accent: var(--accent-slate);  --accent-soft: var(--accent-slate-soft); }