/* assets/css/variables.css
   =========================================================
   GLOBAL THEME TOKENS (Single Source of Truth)
   - Default: DARK (company colors)
   - Light:   Orange-oriented palette (only where appropriate)
   ========================================================= */

:root {
  /* Brand (company) */
  --cizgi-brand-blue: #004990;
  --cizgi-brand-red:  #b32017;

  /* Primary mapping */
  --brand: var(--cizgi-brand-blue);
  --accent: var(--cizgi-brand-red);

  /* Core surfaces (DARK) */
  --bg: #020617;          /* page background */
  --surface: #0b1220;     /* elevated surface */
  --card: #0f172a;        /* cards / panels */

  /* Text */
  --text: #e5e7eb;
  --muted: #9ca3af;
  --ink: #e5e7eb;         /* legacy: maps to text */

  /* Lines / shadows */
  --line: rgba(148, 163, 184, 0.35);
  --line-strong: rgba(248, 250, 252, 0.12);

  --radius: 14px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);

  /* RGB helpers (effects/focus) */
  --brand-r: 0;
  --brand-g: 73;
  --brand-b: 144;

  /* Category color – PHP tarafı override edebilir */
  --category-color: var(--brand);

  /* Hero micro-motions (mevcut kullanım uyumu) */
  --hero-parallax: -6px;
  --hero-hover-lift: 0px;
}

/* Light theme (page level)
   Not: Hero alanı global olarak light'a "beyazlatılmıyor".
   Hero'yu ayrı dosyalarda/kurallarda kilitliyoruz. */
html.theme-light,
body.light,
html[data-theme="light"],
body[data-theme="light"],
.theme-light {
  /* Light palette: orange-oriented */
  --brand: #f97316;   /* orange-500 */
  --accent: #ea580c;  /* orange-600 */

  --bg: #f6f7fb;
  --surface: #ffffff;
  --card: #ffffff;

  --text: #0f172a;
  --muted: #475569;
  --ink: #0f172a;

  --line: rgba(15, 23, 42, 0.10);
  --line-strong: rgba(15, 23, 42, 0.16);

  --shadow: 0 12px 32px rgba(2, 6, 23, 0.10);
  --shadow-lg: 0 18px 50px rgba(2, 6, 23, 0.14);

  --brand-r: 249;
  --brand-g: 115;
  --brand-b: 22;

  --category-color: var(--brand);
}

/* Safe defaults */
html,
body {
  background: var(--bg);
  color: var(--text);
}