/* Aus dem Design-System 'Transkript' übernommen und auf BEM-freie Klassennamen umgestellt
   (tk-btn--primary -> btn-primary, tk-recrow__title -> recrow-title). KI-generiert (Claude). */
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Variable-latin-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Variable.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;}

:root{
/* Teal — secondary scale (wave accent, info) */
--teal-50:#EEFBFA;--teal-100:#D3F4F1;--teal-200:#A8E8E3;--teal-300:#72D6D0;--teal-400:#3DBDB8;--teal-500:#11A09D;--teal-600:#0B7C7C;--teal-700:#0B6466;--teal-800:#0F5153;--teal-900:#113F42;--teal-950:#052A2D;
/* Aqua — primary brand scale */
--aqua-50:#EDF9FD;--aqua-100:#D4F0FA;--aqua-200:#A9E1F4;--aqua-300:#72CDEC;--aqua-400:#3FB5E0;--aqua-500:#1A9BCB;--aqua-600:#127DA8;--aqua-700:#126486;--aqua-800:#134F69;--aqua-900:#123F54;--aqua-950:#082838;
/* Neutrals — cool, slightly teal-tinted */
--neutral-0:#FFFFFF;--neutral-25:#FAFCFC;--neutral-50:#F3F7F7;--neutral-100:#E8EEEF;--neutral-200:#D6E0E1;--neutral-300:#B9C6C8;--neutral-400:#8A9B9E;--neutral-500:#64777A;--neutral-600:#4A5B5F;--neutral-700:#344448;--neutral-800:#213034;--neutral-900:#132024;
/* Semantic bases */
--green-50:#E8F7F0;--green-500:#1F9D6B;--green-700:#157350;
--amber-50:#FDF5E1;--amber-500:#D59A12;--amber-700:#8F6205;
--red-50:#FDEDEE;--red-500:#DE4650;--red-600:#C7343E;--red-700:#A12730;

/* Semantic aliases — surfaces */
--surface-page:var(--neutral-25);
--surface-sunken:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-raised:var(--neutral-0);
--surface-tint:var(--aqua-50);
--surface-inverse:var(--neutral-900);
--surface-overlay:rgba(19,32,36,.42);

/* Text */
--text-strong:var(--neutral-900);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-subtle:var(--neutral-400);
--text-on-brand:#FFFFFF;
--text-brand:var(--aqua-700);
--text-link:var(--aqua-600);
--text-link-hover:var(--aqua-800);
--text-inverse:var(--neutral-0);

/* Borders */
--border-subtle:var(--neutral-100);
--border-default:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-brand:var(--aqua-500);

/* Brand / interactive */
--brand:var(--aqua-600);
--brand-hover:var(--aqua-700);
--brand-press:var(--aqua-800);
--brand-soft:var(--aqua-50);
--brand-soft-hover:var(--aqua-100);
--brand-wave-1:var(--aqua-300);
--brand-wave-2:var(--teal-300);
--brand-wave-3:var(--aqua-200);

/* Recording */
--rec:var(--red-500);
--rec-hover:var(--red-600);
--rec-soft:var(--red-50);

/* Status */
--success:var(--green-500);--success-fg:var(--green-700);--success-soft:var(--green-50);
--warning:var(--amber-500);--warning-fg:var(--amber-700);--warning-soft:var(--amber-50);
--danger:var(--red-500);--danger-fg:var(--red-700);--danger-soft:var(--red-50);
--info:var(--teal-500);--info-fg:var(--teal-700);--info-soft:var(--teal-50);

--focus-ring:0 0 0 3px rgba(26,155,203,.30);
}

:root{
--space-0:0;--space-0-5:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;

--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:999px;
--radius-control:var(--radius-md);
--radius-card:var(--radius-lg);
--radius-sheet:var(--radius-xl);

--control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;
--touch-min:44px;
--appbar-h:56px;--bottomnav-h:64px;
--content-max:720px;
--gutter-mobile:16px;--gutter-desktop:32px;
}

:root{
--font-sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

--weight-regular:450;--weight-medium:550;--weight-semibold:650;--weight-bold:750;

--text-display-size:40px;--text-display-line:44px;--text-display-track:-0.025em;
--text-h1-size:30px;--text-h1-line:36px;--text-h1-track:-0.02em;
--text-h2-size:22px;--text-h2-line:28px;--text-h2-track:-0.015em;
--text-h3-size:17px;--text-h3-line:24px;--text-h3-track:-0.01em;
--text-lg-size:17px;--text-lg-line:27px;
--text-body-size:15px;--text-body-line:22px;
--text-sm-size:13px;--text-sm-line:18px;
--text-xs-size:12px;--text-xs-line:16px;
--text-overline-size:11px;--text-overline-line:14px;--text-overline-track:0.08em;
--text-mono-size:13px;--text-mono-line:18px;
--text-timer-size:44px;--text-timer-line:48px;

/* Semantic */
--font-display:var(--font-sans);
--font-body:var(--font-sans);
--font-timestamp:var(--font-mono);
}

:root{
--shadow-xs:0 1px 2px rgba(17,63,66,.06);
--shadow-sm:0 1px 2px rgba(17,63,66,.05),0 2px 6px rgba(17,63,66,.06);
--shadow-md:0 2px 4px rgba(17,63,66,.05),0 8px 20px rgba(17,63,66,.08);
--shadow-lg:0 4px 8px rgba(17,63,66,.06),0 18px 40px rgba(17,63,66,.12);
--shadow-brand:0 6px 18px rgba(18,125,168,.28);
--shadow-rec:0 6px 22px rgba(222,70,80,.32);
--shadow-inset:inset 0 1px 2px rgba(17,63,66,.06);

--ease-out:cubic-bezier(.2,.7,.2,1);/* @kind other */
--ease-in-out:cubic-bezier(.45,0,.25,1);/* @kind other */
--ease-wave:cubic-bezier(.37,0,.63,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:320ms;/* @kind other */--dur-wave:2400ms;/* @kind other */

--blur-bar:saturate(160%) blur(14px);/* @kind other */
--surface-glass:rgba(250,252,252,.82);
}