@import "tailwindcss";

@theme {
  /* === Background-Layers === */
  --color-bg-base:        #f5f3ee;
  --color-bg-soft:        #ffffff;
  --color-bg-elev:        #fafaf7;
  --color-bg-tint:        #f0eee9;

  /* === Ink-Hierarchie === */
  --color-ink-1:          oklch(0.22 0.015 270);
  --color-ink-2:          oklch(0.42 0.012 270);
  --color-ink-3:          oklch(0.58 0.01  270);
  --color-ink-4:          oklch(0.72 0.008 270);

  /* === Lines / Borders === */
  --color-line:           oklch(0.92 0.006 85);
  --color-line-strong:    oklch(0.85 0.008 85);

  /* === Brand / Primary === */
  --color-primary:        oklch(0.50 0.18 255);
  --color-primary-soft:   oklch(0.95 0.04 255);
  --color-primary-ink:    oklch(0.42 0.22 255);
  --color-primary-hover:  oklch(0.45 0.20 255);

  /* === Subject-Color-Tokens === */
  --color-rose-soft:      oklch(0.95 0.04 25);
  --color-rose-ink:       oklch(0.50 0.16 25);

  --color-violet-soft:    oklch(0.95 0.04 295);
  --color-violet-ink:     oklch(0.50 0.16 295);

  --color-green-soft:     oklch(0.95 0.04 155);
  --color-green-ink:      oklch(0.50 0.14 155);

  --color-amber-soft:     oklch(0.95 0.05 75);
  --color-amber-ink:      oklch(0.55 0.14 75);

  /* === Feedback === */
  --color-success:        oklch(0.55 0.16 155);
  --color-warning:        oklch(0.65 0.16 75);
  --color-danger:         oklch(0.55 0.20 25);

  /* === Legacy-Tokens (Auth-Pages) === */
  --color-text-primary:   oklch(0.22 0.015 270);
  --color-text-secondary: oklch(0.42 0.012 270);
  --color-text-muted:     oklch(0.58 0.01 270);
  --color-border-subtle:  oklch(0.92 0.006 85);
  --color-surface:        #ffffff;
  --color-accent:         oklch(0.42 0.22 255);
  --color-accent-hover:   oklch(0.36 0.24 255);
  --color-accent-muted:   oklch(0.96 0.04 255);

  /* === Fonts === */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* === Radii === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 30, 0.06);

  /* === Layout-Spacing === */
  --spacing-sb: 240px;
  --spacing-tb: 56px;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

body {
    background-color: var(--color-bg-base);
    color: var(--color-ink-1);
    font-family: var(--font-display);
    font-feature-settings: 'cv11','ss01';
}

.font-mono, .mono {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum','zero';
}

[x-cloak] { display: none !important; }