/**
 * Design tokens — the single source of truth for the neumorphic system.
 * Every component references these custom properties; never hardcode a
 * shadow, radius, or colour inline (MASTER SKILL.MD sections 5, 25, 33).
 */

:root {
  /* SURFACE */
  --surface: #eef0f2;
  --surface-raised: #eef0f2;
  --surface-recessed: #eef0f2;

  /* TEXT */
  --text-primary: #1a1c1e; 
  --text-secondary: #55595e;
  --text-muted: #8a8f95;
  --text-on-dark: #f3f4f5;
  --textnewblue: #bcecff;

  /* NEUTRAL CONTROLS */
  --control-dark: #262a2d;
  --control-dark-hover: #33383c;

  /* FUNCTIONAL STATES (used sparingly — spec section 11) */
  --state-success: #2e7d4f;
  --state-success-bg: #e4f2e9;
  --state-warning: #9a6a10;
  --state-warning-bg: #f7ecd9;
  --state-error: #b3261e;
  --state-error-bg: #fbe9e8;
  --state-info: #2d5e91;
  --state-info-bg: #e6eef6;

  /* SHADOWS — light source top-left, consistent across the app */
  --shadow-light: rgba(255, 255, 255, 0.75);
  --shadow-dark: rgba(163, 168, 173, 0.55);

  --elevation-1: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light);
  --elevation-2: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
  --elevation-3: 7px 7px 16px var(--shadow-dark), -7px -7px 16px var(--shadow-light);
  --elevation-recessed: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
  --elevation-recessed-strong: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);

  /* RADII */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px; /* signature panels — e.g. the auth screen's image panel */

  /* SPACING */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* CONTROL SIZING */
  --control-height: 44px;
  --control-height-sm: 34px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 72px;
  --content-max-width: 1360px;

  /* TRANSITIONS */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* TYPOGRAPHY */
  --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-entry: 'Poppins', var(--font-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1c1e20;
    --surface-raised: #1c1e20;
    --surface-recessed: #1c1e20;
    --text-primary: #eceeef;
    --text-secondary: #a7acb1;
    --text-muted: #74787d;
    --control-dark: #f2f3f4;
    --control-dark-hover: #ffffff;
    --shadow-light: rgba(255, 255, 255, 0.045);
    --shadow-dark: rgba(0, 0, 0, 0.6);
    --state-success-bg: #16261c;
    --state-warning-bg: #2a2210;
    --state-error-bg: #2b1917;
    --state-info-bg: #142334;
     --textnewblue: #033d47;
  }
}

:root[data-theme="dark"] {
  --surface: #1c1e20;
  --surface-raised: #1c1e20;
  --surface-recessed: #1c1e20;
  --text-primary: #eceeef;
  --text-secondary: #a7acb1;
  --text-muted: #74787d;
  --control-dark: #f2f3f4;
  --control-dark-hover: #ffffff;
  --shadow-light: rgba(255, 255, 255, 0.045);
  --shadow-dark: rgba(0, 0, 0, 0.6);
  --state-success-bg: #16261c;
  --state-warning-bg: #2a2210;
  --state-error-bg: #2b1917;
  --state-info-bg: #142334;
   --textnewblue: #bcecff;
}