/* ==========================================================
   🎨 color-palette.css — Centralized Brand & Theme Variables
   ========================================================== */

/* Example for Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
  --font-logo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  /* 🔷 Primary Brand Colors */
  --color-primary: #008B9C;          /* Teal – Main */
  --color-primary-light: #00A9B7;    /* Light Teal – Accent */
  --color-accent: #E48B26;           /* Gold-Orange – Emphasis */
  --color-accent-light: #e2b178;           /* Gold-Orange – Emphasis */
  --color-bg: #F8F9F9;               /* Off-White – Background */
  --color-white: #ffffff;            /* Pure white */

  /* 📝 Text & Muted Shades */
  --color-text: #111827;             /* Strong Neutral Text */
  --color-muted: #6b7280;            /* Muted Text */
  --color-muted-dark: #374151;       /* Darker Muted Text */

  /* 📏 Borders & Lines */
  --color-border: var(--color-primary);
  --color-border-light: #e5e7eb;
  --color-border-soft: #f0fbff;      /* Lighter border tone */

  /* ⚠️ State & Feedback Colors */
  --color-danger: #dc2626;
  --color-danger-bg: #fef2e2;
  --color-danger-border: #fee2e2;
  --color-disabled: #999999;
  --color-bg-disabled: #f5f5f5;

  /* 💡 Utility Shades */
  --color-muted-light: #aaa;
  --color-icon-muted: #666;
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-hover-light: rgba(0, 0, 0, 0.05);
  --color-brand-focus: rgba(0, 139, 156, 0.2);

  /* 🎯 Brand Aliases (for backward compatibility) */
  --brand: var(--color-primary);
  --brand-dark: #006064;
  --accent: var(--color-primary-light);
  --danger: var(--color-danger);
  --text-muted: var(--color-muted);
  --c-accent: var(--color-primary-light);
  --c-text: var(--color-text);
  --c-white: var(--color-bg);

  /* 👥 Role / Status Colors */
  --color-client: #a35a00;
  --color-developer: #0366d6;
  --color-manager: #004b8d;
  --status-onhold: #f5a623;
  --status-success: #27ae60;
  --status-admin: #9b59b6;

  /* 🧩 Scoped Variables (Assign modal / contextual UI) */
  --assign-bg: var(--color-bg);
  --assign-text: var(--color-text);
  --assign-accent: var(--brand);
  --assign-accent-dark: var(--brand-dark);
  --assign-muted: var(--color-muted);
  --assign-muted-dark: var(--color-muted-dark);
  --assign-border: var(--color-border-light);
  --assign-danger: var(--color-danger);
  --assign-danger-bg: var(--color-danger-bg);
  --assign-danger-border: var(--color-danger-border);

  /* 🧱 Layout / Radius / Spacing */
  --radius-md: 0.3rem;
  --spacing-sm: 0.75rem;

  /* 🌟 Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08);
  --assign-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 2px 10px rgba(0, 0, 0, 0.06);

  --step-icon:56px;               /* outer circle size */
  --connector:4px;     

  --ink-900:#0f172a;              /* dark text */
  --ink-700:#334155;
  --ink-500:#64748b;
  --card:#ffffff;
  --bg:#f7fafb;
  --ring: color-mix(in oklab, var(--color-primary) 28%, transparent);
  --sidebar-width: 280px;
  --transition-speed: 0.3s;
  --panel-wash: color-mix(in oklab, var(--color-primary) 9%, transparent);
  --panel-wash-2: color-mix(in oklab, var(--color-accent) 10%, transparent);
  --step-icon: 56px;
}

body {
    font-family: system-ui, sans-serif;
    margin: 0;
    background: var(--color-bg-light);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}