/* ============================================================
   BASE.CSS — Reset, Typography, Design Tokens
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Colors */
  --color-primary:        #2563eb;
  --color-primary-dark:   #1d4ed8;
  --color-accent:         #667eea;
  --color-accent-end:     #764ba2;
  --color-success:        #10b981;
  --color-success-dark:   #059669;
  --color-warning:        #f59e0b;
  --color-warning-dark:   #d97706;
  --color-danger:         #dc2626;
  --color-danger-light:   #ef4444;
  --color-purple:         #8b5cf6;
  --color-purple-dark:    #7c3aed;
  --color-sky:            #0ea5e9;
  --color-sky-dark:       #0284c7;
  --color-slate:          #475569;
  --color-slate-light:    #64748b;

  /* Text */
  --text-body:            #333;
  --text-muted:           rgba(0,0,0,0.6);
  --text-faint:           #999;
  --text-heading:         #2c3e50;

  /* Surfaces */
  --surface-white:        #ffffff;
  --surface-light:        #f9fafb;
  --surface-border:       #e0e0e0;
  --surface-dark:         #1e293b;
  --surface-dark-mid:     #334155;

  /* Radius */
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            14px;
  --radius-xl:            20px;
  --radius-full:          9999px;

  /* Shadows */
  --shadow-soft:          0 6px 18px rgba(0,0,0,0.08);
  --shadow-card:          0 2px 8px rgba(0,0,0,0.1);
  --shadow-float:         0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);

  /* Spacing */
  --gap-xs:               6px;
  --gap-sm:               10px;
  --gap-md:               20px;
  --gap-lg:               30px;

  /* Transitions */
  --transition-base:      all 0.3s ease;
  --transition-fast:      all 0.18s ease;

  /* ── Brand identity (theme-toggle tokens) ───────────────────
     Everything below drives the color-theme switcher. Defaults
     reproduce today's look exactly (zero drift when no theme is
     selected). Most status colors (success/danger/sky/slate) stay
     fixed across themes so undo/restore keep their normal meaning;
     the Add Task/Add Duty/Add Section/Clear buttons are
     the deliberate exception — see the palette override block
     below, which recolors just those under palette1 & palette2. */
  --brand-primary:       #6366f1;
  --brand-primary-deep:  #4338ca;
  --brand-primary-btn:   #4f46e5;
  --brand-secondary:     #8b5cf6;
  --brand-accent:        #fde047;
  --brand-accent-dark:   #a16207;
}

/* ══════════════════════════════════════════════════════════
   THEME PALETTES — toggled via [data-theme] on <html>.
   Card/panel tints elsewhere in the app are derived from these
   four-to-six tokens with color-mix(), so this block is the
   single source of truth for both alternate looks.
   ══════════════════════════════════════════════════════════ */
html[data-theme="palette1"] {
  --brand-primary:      #6595BF;
  --brand-primary-deep: #3F6488;
  --brand-primary-btn:  #4C7AA3;
  --brand-secondary:    #7A8C5F;
  --brand-accent:       #D87757;
  --brand-accent-dark:  #A8482D;
}
html[data-theme="palette2"] {
  --brand-primary:      #639A87;
  --brand-primary-deep: #4A7465;
  --brand-primary-btn:  #578A79;
  --brand-secondary:    #827DBD;
  --brand-accent:       #D87757;
  --brand-accent-dark:  #A8482D;
}

/* ── Action-button overrides for Theme 2 & Theme 3 ────────────
   كتلة إعادة تلوين أزرار الإضافة حُذفت في v4.9.0.

   كانت تفرض تدرّجاً أخضر على .btn-add و.cv-add-task و.cv-add-duty
   ثم تستبدله بلون السمة تحت palette1/palette2. صارت زائدة: هذه
   الأزرار تستخدم الآن var(--brand-primary-btn) مباشرةً، وهو
   متغيّر يتبدّل مع السمة تلقائياً — فالتلوين يجري في مكان واحد
   بدل ثلاثة.

   الأهمّ أنها كانت ستتعارض: قواعد السمة هنا محدّدة بـ
   html[data-theme=...] بوزن (0,2,1)، وكانت ستُعيد التدرّج الأخضر
   عند اختيار Theme 2 أو 3 وتنقض التوحيد اللوني.

   انظر قسم "TAB: DUTIES & TASKS" في نهاية components.css. */

/* .btn-add-image override removed in v4.15.0: Add Logo now uses
   var(--brand-primary-btn) directly (same as Export Project), which
   already switches with the theme — see components.css. */

/* NOTE: .btn-clear-section is deliberately NOT themed here. In the
   Additional Information tab it is a soft-red icon-only button
   (see components.css) and must stay visually quiet in every theme. */
html[data-theme="palette1"] #btnClearAll,
html[data-theme="palette1"] .btn-clear-all,
html[data-theme="palette2"] #btnClearAll,
html[data-theme="palette2"] .btn-clear-all {
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-dark) 100%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-accent-dark) 25%, transparent);
}
html[data-theme="palette1"] #btnClearAll:hover,
html[data-theme="palette1"] .btn-clear-all:hover,
html[data-theme="palette2"] #btnClearAll:hover,
html[data-theme="palette2"] .btn-clear-all:hover {
  box-shadow: 0 5px 15px color-mix(in srgb, var(--brand-accent-dark) 40%, transparent);
}

/* ── Reset ─────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Base Elements ─────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  min-height: 100vh;
  padding: 20px;
}

h1 {
  color: var(--brand-primary);
  margin-bottom: 10px;
  font-size: 2.5em;
  text-align: center;
  font-weight: 700;
}

h2 {
  color: var(--text-heading);
  font-size: 1.8em;
  margin-bottom: 20px;
  font-weight: 600;
}

h3 {
  color: #34495e;
  font-size: 1.4em;
  margin-bottom: 15px;
  font-weight: 600;
}

h4 {
  color: #555;
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: 600;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-body);
  font-weight: 600;
  font-size: 1.1em;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ── Form Controls ─────────────────────────────────────────── */
input[type="text"],
textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--surface-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-size: 1.05em;
  margin-bottom: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="text"]:focus,
textarea:focus {
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

input[type="date"] {
  padding: 14px;
  border: 2px solid var(--surface-border);
  border-radius: var(--radius-sm);
  font-size: 1.05em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
  cursor: pointer;
}

input[type="date"]:focus {
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* ── Button Base ───────────────────────────────────────────── */
button {
  cursor: pointer;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1.05em;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

button:active {
  transform: translateY(0);
}

/* ── Utility Classes ───────────────────────────────────────── */
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.icon  { margin-right: 8px; }
.hidden { display: none; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}