/* ==========================================================================
   Cokolex design tokens — colors, typography, spacing, radius, elevation, motion
   Source: Cokolex Design System (claude.ai/design)
   ========================================================================== */
:root {
  /* Base palette */
  --blue-700: #061B6B;
  --blue-600: #0B2FB0;
  --blue-500: #1649FF;
  --blue-400: #4F76FF;
  --blue-100: #E4EAFF;
  --blue-50:  #F1F4FF;

  --teal-600: #0B9A88;
  --teal-500: #10BFA8;
  --teal-200: #8DE6DA;
  --teal-50:  #E7FAF6;

  --ink-900: #111827;
  --ink-800: #262626;
  --ink-700: #374151;
  --ink-600: #4B5563;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-200: #E5E7EB;
  --ink-100: #F0F1F3;
  --ink-50:  #F4F5F7;
  --white:   #FFFFFF;

  --amber-500: #F5A524;
  --red-500:   #E5484D;

  /* Semantic aliases */
  --brand-primary: var(--blue-500);
  --brand-deep: var(--blue-600);
  --brand-accent: var(--teal-500);
  --brand-wordmark: var(--ink-800);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-invert: var(--white);
  --text-link: var(--blue-500);
  --text-link-hover: var(--blue-600);

  --surface-page: var(--ink-50);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--ink-900);
  --surface-brand: var(--blue-500);
  --surface-brand-soft: var(--blue-50);
  --surface-accent-soft: var(--teal-50);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-400);
  --border-brand: var(--blue-500);

  --status-success: var(--teal-500);
  --status-warning: var(--amber-500);
  --status-danger: var(--red-500);
  --status-info: var(--blue-500);

  --gradient-brand: linear-gradient(135deg, var(--blue-600), var(--blue-500) 55%, var(--teal-500));
  --gradient-cover: linear-gradient(115deg, #061B6B 0%, #0B2FB0 32%, #1649FF 62%, #10BFA8 100%);
  --gradient-glow: radial-gradient(120% 160% at 82% 18%, rgba(37,211,184,0.55) 0%, rgba(22,73,255,0) 58%);

  /* Grain overlay used on gradient surfaces */
  --texture-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIj48ZmlsdGVyIGlkPSJnIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSI0IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNDAiIGZpbHRlcj0idXJsKCNnKSIvPjwvc3ZnPg==");
  --texture-grain-coarse: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PGZpbHRlciBpZD0iZyI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMzIiIG51bU9jdGF2ZXM9IjIiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbHRlcj0idXJsKCNnKSIvPjwvc3ZnPg==");
  --grain-opacity: 0.05;
  --grain-opacity-coarse: 0.05;

  /* Typography */
  --font-display: 'Oxanium', 'Exo 2', 'Archivo', Helvetica, Arial, sans-serif;
  --font-sans: 'Archivo', 'Fira Sans', Helvetica, Arial, sans-serif;
  --font-display-greek: 'Exo 2', 'Oxanium', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Serifen-Display für Hero und große Titel — bewusste CI-Erweiterung (10.09.2026),
     identisch mit Cokolex_Logo_Kit/tokens/typography.css. Hier ändern, um die Schrift zu tauschen. */
  --font-display-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --tracking-display-serif: -0.03em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-6xl: 72px;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-loose: 1.9;

  --tracking-wordmark: 0.06em;
  --tracking-wordmark-stacked: 0.14em;
  --tracking-label: 0.14em;
  --tracking-label-tight: 0.12em;
  --tracking-display: 0.005em;
  --tracking-normal: 0;

  /* Composite type scale (shorthand `font` tokens) */
  --type-hero: var(--weight-regular) var(--text-6xl)/var(--leading-tight) var(--font-display-serif);
  --type-title-serif: var(--weight-regular) var(--text-4xl)/var(--leading-tight) var(--font-display-serif);
  --type-title: var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-display-greek);
  --type-heading: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);
  --type-eyebrow: var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-mono);

  /* Spacing */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;

  --gap-inline: var(--space-3);
  --gap-stack: var(--space-5);
  --gap-section: var(--space-11);
  --pad-card: var(--space-7);
  --pad-card-lg: var(--space-8);
  --page-max: 1100px;
  --page-gutter: var(--space-9);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-app-icon: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(17,24,39,0.06);
  --shadow-md: 0 6px 20px rgba(17,24,39,0.08);
  --shadow-lg: 0 18px 48px rgba(17,24,39,0.14);
  --shadow-brand: 0 10px 30px rgba(22,73,255,0.28);
  --focus-ring: 0 0 0 3px rgba(22,73,255,0.28);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-control: background-color var(--duration-base) var(--ease-standard),
                        color var(--duration-base) var(--ease-standard),
                        border-color var(--duration-base) var(--ease-standard),
                        box-shadow var(--duration-base) var(--ease-standard);
}