/*
 * Design tokens from DESIGN.md (soora). Shared by the app shell and by every sandboxed tool.
 * Dark is the default register; light applies for an explicit choice or when the system asks for it.
 * Deviations (contrast fixes, missing dark status fills) are listed in DESIGN.local.md.
 */
:root {
  color-scheme: dark;

  --brand: #E000A1;
  --on-brand: #FFFBF5;

  --canvas: #0B0B0B;
  --surface: #141414;
  --surface-subtle: #1C1C1A;
  --border: #30302D;
  --border-strong: #53534E;
  --text: #FFFBF5;
  --text-soft: #D6D0C8;
  --text-muted: #98938C;

  --action: #EA9FE8;
  --action-hover: #EEB1EC;
  --on-action: #0B0B0B;
  --link: #EA9FE8;
  --focus: #EA9FE8;

  --success: #47C875;   --success-bg: #12351F;
  --warning: #FFB224;   --warning-bg: #3A2A08;
  --danger:  #FF7168;   --danger-bg:  #3A1512;
  --info:    #4FA8F0;   --info-bg:    #0F2438;

  --sidebar-bg: #141414;
  --code-bg: #050505;
  --code-text: #FFFBF5;
  --tooltip-bg: #FFFBF5;
  --tooltip-text: #262626;
  --scrim: rgba(0, 0, 0, 0.62);
  --shadow-pop: 0 12px 36px rgba(0, 0, 0, 0.42);
  --shadow-modal: 0 28px 90px rgba(0, 0, 0, 0.58);

  --font-display: "Fraunces", "Vazirmatn", Georgia, serif;
  --font-body: "Schibsted Grotesk", "Vazirmatn", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Vazirmatn", ui-monospace, monospace;

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-full: 9999px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #FFFFFF;
  --surface: #FFFFFF;
  --surface-subtle: #F5F3EF;
  --border: #DDDAD4;
  --border-strong: #B7B4AE;
  --text: #262626;
  --text-soft: #4B4B4B;
  --text-muted: #626266;
  --action: #E072DD;
  --action-hover: #E88BE5;
  --on-action: #262626;
  --link: #B80084;
  --focus: #B80084;
  --success: #138A42;   --success-bg: #E6F6EB;
  --warning: #B26000;   --warning-bg: #FFF0D1;
  --danger:  #C5281C;   --danger-bg:  #FDE8E5;
  --info:    #0A73C9;   --info-bg:    #E5F1FB;
  --sidebar-bg: #F5F3EF;
  --code-bg: #262626;
  --code-text: #FFFBF5;
  --tooltip-bg: #262626;
  --tooltip-text: #FFFBF5;
  --scrim: rgba(20, 20, 20, 0.4);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.20);
}

/* "system" (no data-theme) follows the OS; dark stays the fallback. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --canvas: #FFFFFF; --surface: #FFFFFF; --surface-subtle: #F5F3EF;
    --border: #DDDAD4; --border-strong: #B7B4AE;
    --text: #262626; --text-soft: #4B4B4B; --text-muted: #626266;
    --action: #E072DD; --action-hover: #E88BE5; --on-action: #262626;
    --link: #B80084; --focus: #B80084;
    --success: #138A42; --success-bg: #E6F6EB;
    --warning: #B26000; --warning-bg: #FFF0D1;
    --danger: #C5281C; --danger-bg: #FDE8E5;
    --info: #0A73C9; --info-bg: #E5F1FB;
    --sidebar-bg: #F5F3EF; --code-bg: #262626; --code-text: #FFFBF5;
    --tooltip-bg: #262626; --tooltip-text: #FFFBF5;
    --scrim: rgba(20, 20, 20, 0.4);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.20);
  }
}