/* ============================================================
   OPUS ONE — DESIGN TOKENS
   Foundation layer: color, spacing, radii, shadow, type.
   Light is default; [data-theme="dark"] overrides color tokens.
   ============================================================ */

:root {
  /* — Brand — */
  --brand-yellow: #FFC501;
  --brand-yellow-press: #E6B100;
  --brand-charcoal: #161616;

  /* — Role colors (avatars) — */
  --role-admin: #161616;
  --role-pm: #3B82F6;
  --role-consultant: #8B5CF6;
  --role-sales: #F59E0B;
  --role-client: #10B981;
  --role-observer: #9CA3AF;

  /* — Spacing scale (4px base) — */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px;

  /* — Radii — */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;
  --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-full: 999px;

  /* — Type — */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-micro: 11px;  --fs-xs: 12px;  --fs-sm: 13px;  --fs-base: 14px;
  --fs-md: 15px;     --fs-lg: 16px;  --fs-xl: 18px;  --fs-2xl: 22px;
  --fs-3xl: 28px;    --fs-4xl: 34px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5;

  /* — Motion — */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;

  /* — Layout — */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
}

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

  --bg: #FBFBFA;            /* app canvas — warm near-white */
  --bg-elevated: #FFFFFF;   /* cards, surfaces */
  --bg-sunken: #F4F4F2;     /* wells, table headers */
  --bg-hover: #F2F2F0;      /* row / item hover */
  --bg-active: #ECECEA;     /* pressed / selected */
  --sidebar-bg: #FFFFFF;
  --topbar-bg: rgba(251, 251, 250, 0.82);

  --border: #E8E8E5;        /* default 1px hairline */
  --border-strong: #DBDBD7;
  --border-subtle: #F0F0EE;

  --text: #161616;          /* primary */
  --text-secondary: #45454A;
  --text-muted: #6B6B72;    /* labels, meta */
  --text-faint: #9A9AA0;    /* placeholder, disabled */
  --text-on-accent: #161616;
  --text-on-dark: #FAFAF8;

  --accent: var(--brand-yellow);
  --accent-press: var(--brand-yellow-press);
  --accent-soft: #FFF6D6;   /* tinted bg behind accent items */
  --accent-ring: rgba(255, 197, 1, 0.45);
  --focus-ring: rgba(59, 130, 246, 0.45);

  /* Semantic surfaces — calm, AA-compliant text variants */
  --c-slate:  #64748B; --c-slate-bg:  #F1F3F6; --c-slate-fg:  #475569;
  --c-blue:   #3B82F6; --c-blue-bg:   #EAF1FE; --c-blue-fg:   #1D4FB8;
  --c-amber:  #F59E0B; --c-amber-bg:  #FEF3E2; --c-amber-fg:  #B36C04;
  --c-violet: #8B5CF6; --c-violet-bg: #F2EDFE; --c-violet-fg: #6D3FD4;
  --c-green:  #10B981; --c-green-bg:  #E5F6EF; --c-green-fg:  #0A7C5A;
  --c-red:    #EF4444; --c-red-bg:    #FDECEC; --c-red-fg:    #C0342E;
  --c-teal:   #14B8A6; --c-teal-bg:   #E2F5F2; --c-teal-fg:   #0B7A6F;
  --c-rose:   #F43F5E; --c-rose-bg:   #FDEAEE; --c-rose-fg:   #C32B45;

  --shadow-xs: 0 1px 2px rgba(20, 20, 22, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 20, 22, 0.07), 0 1px 2px rgba(20, 20, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 22, 0.08), 0 2px 4px rgba(20, 20, 22, 0.04);
  --shadow-lg: 0 12px 28px rgba(20, 20, 22, 0.12), 0 4px 10px rgba(20, 20, 22, 0.06);
  --shadow-xl: 0 24px 56px rgba(20, 20, 22, 0.18), 0 8px 20px rgba(20, 20, 22, 0.08);
  --shadow-drawer: -16px 0 48px rgba(20, 20, 22, 0.12);
}

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

  --bg: #131314;
  --bg-elevated: #1B1B1D;
  --bg-sunken: #0E0E0F;
  --bg-hover: #232325;
  --bg-active: #2A2A2D;
  --sidebar-bg: #161618;
  --topbar-bg: rgba(19, 19, 20, 0.82);

  --border: #2A2A2D;
  --border-strong: #3A3A3E;
  --border-subtle: #202022;

  --text: #F4F4F3;
  --text-secondary: #C4C4C6;
  --text-muted: #9A9AA0;
  --text-faint: #6A6A70;
  --text-on-accent: #161616;
  --text-on-dark: #FAFAF8;

  --accent: var(--brand-yellow);
  --accent-press: var(--brand-yellow-press);
  --accent-soft: #2C2614;
  --accent-ring: rgba(255, 197, 1, 0.40);
  --focus-ring: rgba(96, 165, 250, 0.55);

  --c-slate:  #94A3B8; --c-slate-bg:  #21262E; --c-slate-fg:  #AEB9C7;
  --c-blue:   #60A5FA; --c-blue-bg:   #16243B; --c-blue-fg:   #7FB6FB;
  --c-amber:  #FBBF24; --c-amber-bg:  #2E2410; --c-amber-fg:  #F4C667;
  --c-violet: #A78BFA; --c-violet-bg: #241C3A; --c-violet-fg: #B79DFB;
  --c-green:  #34D399; --c-green-bg:  #122C24; --c-green-fg:  #54D9A6;
  --c-red:    #F87171; --c-red-bg:    #311A1B; --c-red-fg:    #F58A8A;
  --c-teal:   #2DD4BF; --c-teal-bg:   #112B29; --c-teal-fg:   #58DDCC;
  --c-rose:   #FB7185; --c-rose-bg:   #321A20; --c-rose-fg:   #FB8B9B;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-drawer: -16px 0 48px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   BASE RESET
   ============================================================ */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1, "cv11" 1;
  letter-spacing: -0.006em;
}

#root { height: 100%; }

button, input, select, textarea {
  font-family: inherit; font-size: inherit; color: inherit;
}
button { cursor: pointer; border: none; background: none; }

::selection { background: var(--accent-ring); color: var(--text); }

a { color: inherit; text-decoration: none; }

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Theme transition — applied briefly when toggling */
.theming, .theming * {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease) !important;
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}