/* ════════════════════════════════════════════════════════════════
 * LYDIAN UNIFIED DESIGN TOKENS — Warm Clay Palette
 * Generated: 2026-05-09
 * Spec: /home/lydian/Masaüstü/SUNUCU + AILYDIAN brand book
 *
 * Loaded via <link rel="stylesheet" href="/lydian-tokens.css">
 * Per-project rules ALWAYS win (this file declares :root variables
 * at lowest specificity — existing app styles unchanged).
 * ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand — Warm Clay (kil sıcak palet) ─────────────── */
  --brand-300: #F5A47C;  /* açık ton, gradient */
  --brand-400: #F08A5D;  /* hover */
  --brand-500: #E97451;  /* ana vurgu */
  --brand-600: #C95A37;  /* active/pressed */
  --brand-700: #8F3D21;  /* koyu ton */

  --brand-glow-soft:    rgba(233, 116, 81, 0.15);
  --brand-glow-strong:  rgba(233, 116, 81, 0.30);
  --brand-border:       rgba(233, 116, 81, 0.35);
  --brand-focus:        rgba(233, 116, 81, 0.70);
  --brand-select-dark:  rgba(233, 116, 81, 0.25);
  --brand-select-light: rgba(233, 116, 81, 0.15);

  /* ── Status ─────────────────────────────────────────── */
  --status-success: #22c55e;
  --status-warning: #f59e0b;
  --status-error:   #ef4444;
  --status-info:    #3b82f6;

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Shadow ─────────────────────────────────────────── */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.30);
  --shadow-elevated:   0 4px 12px rgba(0,0,0,0.40);
  --shadow-brand-glow: 0 0 32px rgba(233,116,81,0.15);

  /* ── Motion ─────────────────────────────────────────── */
  --motion-fast:   150ms;
  --motion-normal: 200ms;
  --motion-slow:   300ms;

  /* ── Fonts ──────────────────────────────────────────── */
  --font-display: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;

  /* ── Letter spacing tokens ──────────────────────────── */
  --tracking-heading: -0.02em;
  --tracking-logo:    -0.03em;
  --tracking-hero:    -0.04em;
}

/* ── Dark (default) ─────────────────────────────────────── */
:root,
[data-theme="dark"],
.dark {
  --bg-primary:   #1f1f1e;
  --bg-secondary: #262624;
  --bg-tertiary:  #2b2b29;
  --bg-card:      #2a2a28;
  --bg-panel:     #1a1a19;
  --bg-elevated:  #33332f;

  --text-primary:   #fafafa;
  --text-secondary: #a3a3a3;
  --text-muted:     #737373;
  --text-quiet:     #525252;

  --border-primary: #262626;
  --border-subtle:  #1f1f1f;
  --border-dark:    #3a3a37;
}

/* ── Light theme override ──────────────────────────────── */
[data-theme="light"],
.light {
  --bg-primary:   #f6f8fa;
  --bg-secondary: #edf0f4;
  --bg-tertiary:  #ffffff;
  --bg-card:      #fafbfc;
  --bg-panel:     #e8ecf0;
  --bg-elevated:  #ffffff;

  --text-primary:   #0d0d0d;
  --text-secondary: #404040;
  --text-muted:     #666666;
  --text-quiet:     #999999;

  --border-primary: #d0d7de;
  --border-subtle:  #e1e4e8;
  --border-dark:    #afb8c1;
}

/* ── Selection (corporate Warm Clay highlight) ─────────── */
::selection {
  background: var(--brand-select-dark);
  color: var(--text-primary, #fafafa);
}
[data-theme="light"] ::selection,
.light ::selection {
  background: var(--brand-select-light);
  color: var(--text-primary, #0d0d0d);
}

/* ── Focus ring (universal) ────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Logo gradient utility (opt-in via .lydian-logo) ──── */
.lydian-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-logo);
  background: linear-gradient(135deg, #ffffff 0%, var(--brand-500) 60%, var(--brand-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="light"] .lydian-logo,
.light .lydian-logo {
  background: linear-gradient(135deg, #0d0d0d 0%, var(--brand-500) 60%, var(--brand-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ════════════════════════════════════════════════════════════════
 * NAMING ALIASES — Tailwind v4 `--color-*` + LYDOS legacy aliases
 * Multiple projects already use `--color-brand-500` (Tailwind v4 @theme),
 * `--color-bg-primary` (LYDOS), or `--color-accent` (legacy holiday/atty).
 * These aliases keep all naming conventions in sync without forcing a
 * project rename. Source of truth: `--brand-*` and `--bg-*` (above).
 * ════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"],
.dark,
[data-theme="light"],
.light {
  /* Tailwind v4 @theme color namespace */
  --color-brand-300: var(--brand-300);
  --color-brand-400: var(--brand-400);
  --color-brand-500: var(--brand-500);
  --color-brand-600: var(--brand-600);
  --color-brand-700: var(--brand-700);
  --color-brand-glow:        var(--brand-glow-soft);
  --color-brand-glow-strong: var(--brand-glow-strong);

  /* Legacy LYDOS / Holiday / Atty pattern */
  --color-accent:       var(--brand-500);
  --color-accent-hover: var(--brand-400);

  --color-bg-primary:   var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-tertiary:  var(--bg-tertiary);
  --color-bg-card:      var(--bg-card);
  --color-bg-panel:     var(--bg-panel);
  --color-bg-elevated:  var(--bg-elevated);

  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted:     var(--text-muted);
  --color-text-quiet:     var(--text-quiet);

  --color-border-primary: var(--border-primary);
  --color-border-subtle:  var(--border-subtle);
  --color-border-dark:    var(--border-dark);

  --color-status-success: var(--status-success);
  --color-status-warning: var(--status-warning);
  --color-status-error:   var(--status-error);
  --color-status-info:    var(--status-info);
}