/* ============================================================
   PRO360 OneAgency — Design Tokens
   Brand: navy #0E3A47 + gold #EDC94F (from logo)
   Surface language: soft mint/teal gradient cards (theme ref)
   ============================================================ */

:root {
  /* --- Brand ------------------------------------------------ */
  --brand-950: #061E26;
  --brand-900: #082730;
  --brand-800: #0E3A47;
  --brand-700: #14505F;
  --brand-600: #1B6577;

  --gold-300: #F4DC8A;
  --gold-400: #EDC94F;
  --gold-500: #D9AF2B;
  --gold-600: #B08D18;

  --teal-200: #A9EDDD;
  --teal-300: #5FD9C0;
  --teal-400: #35C2A5;
  --teal-500: #1FA689;
  --teal-600: #16856E;

  /* --- Semantic status -------------------------------------- */
  --ok: #21A97A;
  --ok-soft: rgba(33, 169, 122, 0.14);
  --warn: #E0A32E;
  --warn-soft: rgba(224, 163, 46, 0.16);
  --danger: #E05B4B;
  --danger-soft: rgba(224, 91, 75, 0.14);
  --info: #3B8BD0;
  --info-soft: rgba(59, 139, 208, 0.14);

  /* --- Radii / spacing / motion ------------------------------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 40px;

  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);
  --dur: 180ms;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 246px;
  --sidebar-w-collapsed: 74px;
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --app-bg: radial-gradient(1200px 700px at 12% -10%, #E6F6F2 0%, transparent 55%),
            radial-gradient(1000px 600px at 100% 0%, #E2F1F5 0%, transparent 50%),
            linear-gradient(160deg, #F2FAF8 0%, #EAF4F3 60%, #E6F2F1 100%);

  --surface: #FFFFFF;
  --surface-2: #F6FAF9;
  --surface-3: #EDF5F3;
  --surface-inset: #F1F7F6;
  --sidebar-bg: #FFFFFF;
  --topbar-bg: rgba(255, 255, 255, 0.72);

  --line: #E2ECEA;
  --line-strong: #CFDEDB;

  --text: #0C2B33;
  --text-2: #4A6B72;
  --text-3: #7D959A;
  --text-inv: #FFFFFF;

  --accent: var(--teal-500);
  --accent-2: var(--teal-400);
  --accent-soft: rgba(31, 166, 137, 0.12);
  --brand-ink: var(--brand-800);
  --gold: var(--gold-500);
  --gold-soft: rgba(237, 201, 79, 0.2);
  /* Sampled straight from the logo artwork, not eyeballed. */
  --logo-ink: #05333E;

  --grad-hero: linear-gradient(135deg, #5FD9C0 0%, #35C2A5 45%, #1FA689 100%);
  --grad-card: linear-gradient(135deg, #62DCC4 0%, #3FC3D6 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 100%);
  --grad-navy: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%);

  --shadow-sm: 0 1px 2px rgba(11, 45, 53, 0.05), 0 2px 8px rgba(11, 45, 53, 0.04);
  --shadow: 0 4px 10px rgba(11, 45, 53, 0.05), 0 14px 34px rgba(11, 45, 53, 0.07);
  --shadow-lg: 0 10px 24px rgba(11, 45, 53, 0.08), 0 28px 60px rgba(11, 45, 53, 0.1);
  --ring: 0 0 0 3px rgba(31, 166, 137, 0.22);

  --chart-grid: #E6EFED;
  --track: #E8F1EF;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --app-bg: radial-gradient(1100px 640px at 8% -12%, #14414B 0%, transparent 55%),
            radial-gradient(900px 560px at 100% 0%, #123C46 0%, transparent 50%),
            linear-gradient(160deg, #0A2028 0%, #0B242C 55%, #091C23 100%);

  --surface: #12303A;
  --surface-2: #16394456;
  --surface-3: #173B46;
  --surface-inset: #0E2831;
  --sidebar-bg: #102A33;
  --topbar-bg: rgba(16, 42, 51, 0.72);

  --line: #1E4552;
  --line-strong: #2A5766;

  --text: #EAF6F4;
  --text-2: #9DBDC1;
  --text-3: #6F9299;
  --text-inv: #06222A;

  --accent: var(--teal-300);
  --accent-2: var(--teal-400);
  --accent-soft: rgba(95, 217, 192, 0.14);
  --brand-ink: #EAF6F4;
  --gold: var(--gold-400);
  --gold-soft: rgba(237, 201, 79, 0.16);
  /* The logo green is unreadable on a dark sidebar — the wordmark goes white. */
  --logo-ink: #FFFFFF;

  --grad-hero: linear-gradient(135deg, #2FD3B4 0%, #23A9C9 55%, #1D7FA8 100%);
  --grad-card: linear-gradient(135deg, #34D6B6 0%, #2A9BD4 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 100%);
  --grad-navy: linear-gradient(135deg, #14505F 0%, #061E26 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.36), 0 32px 70px rgba(0, 0, 0, 0.34);
  --ring: 0 0 0 3px rgba(95, 217, 192, 0.26);

  --chart-grid: #1C414D;
  --track: #143641;

  --ok-soft: rgba(45, 200, 145, 0.16);
  --warn-soft: rgba(237, 201, 79, 0.16);
  --danger-soft: rgba(232, 116, 100, 0.16);
  --info-soft: rgba(90, 170, 235, 0.16);
}