/* ═══════════════════════════════════════════════════════════════
   KuyaPH Design System — CSS Custom Properties
   Single source of truth for the dark premium theme.
   Import this file BEFORE any other stylesheet.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Dark theme backgrounds ────────────────────────────────── */
  --bg-primary:       #1e2a3a;
  --bg-secondary:     #1a2535;
  --bg-surface:       #263548;
  --bg-card:          rgba(255,255,255,0.04);
  --bg-card-hover:    rgba(255,255,255,0.08);
  --bg-input:         rgba(255,255,255,0.06);
  --bg-input-hover:   rgba(255,255,255,0.08);
  --bg-overlay:       rgba(255,255,255,0.02);
  --bg-subtle:        rgba(255,255,255,0.03);
  --bg-highlight:     rgba(255,255,255,0.05);
  --bg-elevated:      rgba(255,255,255,0.10);
  --bg-white:         #fff;
  --bg-light:         #f0f2f5;
  --bg-light-alt:     #f5f5f5;
  --bg-light-blue:    #edf2fa;
  --bg-light-gray:    #f9fafb;
  --bg-muted:         #f1f1f1;
  --bg-dark:          #111827;

  /* ── Text / foreground ─────────────────────────────────────── */
  --text-white:       #fff;
  --text-primary:     rgba(255,255,255,0.92);
  --text-body:        rgba(255,255,255,0.88);
  --text-secondary:   rgba(255,255,255,0.70);
  --text-muted:       rgba(255,255,255,0.55);
  --text-placeholder: rgba(255,255,255,0.35);
  --text-dim:         rgba(255,255,255,0.25);
  --text-faint:       rgba(255,255,255,0.15);
  --text-ghost:       rgba(255,255,255,0.06);
  /* Light-theme text (GIS page, report print, root page) */
  --text-dark:        #111827;
  --text-dark-muted:  #6b7280;
  --text-dark-subtle: #8a94a6;
  --text-dark-light:  #cfd8e3;
  --text-black:       #000;
  --color-link:       #1a0dab;

  /* ── Borders ───────────────────────────────────────────────── */
  --border-hairline:  rgba(255,255,255,0.04);
  --border-subtle:    rgba(255,255,255,0.06);
  --border-light:     rgba(255,255,255,0.08);
  --border-medium:    rgba(255,255,255,0.12);
  --border-strong:    rgba(255,255,255,0.15);
  --border-heavy:     rgba(255,255,255,0.20);
  --border-golden:    rgba(200,170,110,0.25);
  --border-golden-soft: rgba(200,170,110,0.08);
  /* Light borders */
  --border-gray:      #ccc;
  --border-gray-light: #ddd;
  --border-gray-dark: #e0e0e0;
  --border-gray-alt:  #e5e7eb;

  /* ── Accent — Blue (primary action) ────────────────────────── */
  --accent-blue:      #4a90d9;
  --accent-blue-dark: #357abd;
  --accent-blue-light: #5a9fe6;
  --accent-blue-mid:  #4088cc;
  --accent-blue-google: #1a73e8;
  --gradient-blue:    linear-gradient(135deg, #4a90d9, #357abd);
  --accent-blue-shadow:      rgba(74,144,217,0.25);
  --accent-blue-shadow-deep: rgba(74,144,217,0.40);
  --accent-blue-shadow-soft: rgba(74,144,217,0.50);
  --accent-blue-cornflower:  #6495ed;
  --accent-blue-cornflower-shadow: rgba(100,149,237,0.3);

  /* ── Semantic colors — bookkeeping categories ──────────────── */
  --color-income:       #2ecc71;
  --color-income-dark:  #228b22;
  --color-income-deep:  #1e8449;
  --color-income-alt:   #27ae60;
  --color-income-light: #4ade80;
  --color-income-sec:   #19754c;
  /* Green accent variants */
  --color-income-shadow:      rgba(39,174,96,0.35);
  --color-income-shadow-deep: rgba(39,174,96,0.45);
  --color-income-google:      #0f9d58;
  --color-income-material:    #4caf50;

  --color-expense:       #e74c3c;
  --color-expense-light: #ff6b6b;
  --color-expense-deep:  #ee5a6f;
  --color-expense-tomato: #ff6347;
  --color-expense-shadow:      rgba(231,76,60,0.12);
  --color-expense-shadow-deep: rgba(231,76,60,0.25);
  --color-expense-glow:        rgba(231,76,60,0.70);
  --color-expense-tint:        rgba(255,99,71,0.05);

  --color-asset:       #4682b4;
  --color-asset-tint:  rgba(70,130,180,0.05);
  --color-liability:   #daa520;
  --color-liability-shadow: rgba(200,170,110,0.50);
  --color-liability-shadow-soft: rgba(200,170,110,0.20);
  --color-equity:      #9370db;
  --color-equity-tint: rgba(147,112,219,0.05);

  /* ── Debit / Credit text ───────────────────────────────────── */
  --color-debit:       #007700;
  --color-credit:      #770000;

  --color-indigo:      #4B0082;
  --color-indigo-tint: rgba(75,0,130,0.05);

  /* ── Income tints ──────────────────────────────────────────── */
  --color-income-tint: rgba(34,139,34,0.05);

  /* ── VAT / orange ──────────────────────────────────────────── */
  --color-vat:         #ff8c00;
  --color-vat-medium:  rgba(255,140,0,0.5);
  --color-vat-tint:    rgba(255,140,0,0.05);

  /* ── Chart / label palette extras ──────────────────────────── */
  --color-red-badge:   #d0021b;
  --color-orange:      #f5a623;
  --color-orange-warm:  #d4883a;
  --color-orange-shadow:      rgba(212,136,58,0.10);
  --color-orange-shadow-deep: rgba(212,136,58,0.70);
  --color-green-badge: #7ed321;
  --color-purple-alt:  #9013fe;
  --color-teal:        #50e3c2;
  --color-yellow:      #f8e71c;

  /* ── Glass morphism ────────────────────────────────────────── */
  --glass-bg:          rgba(255,255,255,0.04);
  --glass-bg-hover:    rgba(255,255,255,0.08);
  --glass-border:      rgba(255,255,255,0.08);
  --glass-blur:        blur(20px);

  /* ── Box shadows ───────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.10);
  --shadow-card:  0 4px 20px rgba(0,0,0,0.15);
  --shadow-drop:  0 4px 15px rgba(0,0,0,0.30);
  --shadow-blue:  0 4px 15px rgba(74,144,217,0.40);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05);

  /* ── White opacity scale (quick reference) ─────────────────── */
  --w02: rgba(255,255,255,0.02);
  --w03: rgba(255,255,255,0.03);
  --w035: rgba(255,255,255,0.035);
  --w04: rgba(255,255,255,0.04);
  --w05: rgba(255,255,255,0.05);
  --w06: rgba(255,255,255,0.06);
  --w08: rgba(255,255,255,0.08);
  --w10: rgba(255,255,255,0.10);
  --w12: rgba(255,255,255,0.12);
  --w14: rgba(255,255,255,0.14);
  --w15: rgba(255,255,255,0.15);
  --w20: rgba(255,255,255,0.20);
  --w25: rgba(255,255,255,0.25);
  --w28: rgba(255,255,255,0.28);
  --w30: rgba(255,255,255,0.30);
  --w32: rgba(255,255,255,0.32);
  --w35: rgba(255,255,255,0.35);
  --w40: rgba(255,255,255,0.40);
  --w45: rgba(255,255,255,0.45);
  --w50: rgba(255,255,255,0.50);
  --w55: rgba(255,255,255,0.55);
  --w60: rgba(255,255,255,0.60);
  --w65: rgba(255,255,255,0.65);
  --w70: rgba(255,255,255,0.70);
  --w75: rgba(255,255,255,0.75);
  --w80: rgba(255,255,255,0.80);
  --w85: rgba(255,255,255,0.85);
  --w88: rgba(255,255,255,0.88);
  --w90: rgba(255,255,255,0.90);
  --w92: rgba(255,255,255,0.92);

  /* ── Black opacity scale ───────────────────────────────────── */
  --b10: rgba(0,0,0,0.10);
  --b12: rgba(0,0,0,0.12);
  --b15: rgba(0,0,0,0.15);
  --b30: rgba(0,0,0,0.30);

  /* ── Neutral grays ─────────────────────────────────────────── */
  --gray-100: #f9f9f9;
  --gray-200: #aaa;
  --gray-300: #ddd;
  --gray-400: #ccc;
  --gray-500: #808080;
  --gray-600: #666;
  --gray-700: #555;
  --gray-800: #444;
  --gray-900: #333;

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  /* ── Typography ────────────────────────────────────────────── */
  --font-sans:  'Poppins', 'Inter', sans-serif;
  --font-serif: 'PT Serif', 'Times New Roman', serif;
  --font-mono:  'Consolas', 'Monaco', monospace;

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.3s ease;
}