/* AI Strategy Workforce — design tokens ("Studio Ink").
   Warm paper + deep ink-blue; saffron is reserved for «waiting for a person». Every colour, size,
   radius, shadow and duration the interface uses is named here and nowhere else. Light is the
   default; dark is the same names with other values. Logical properties are used everywhere so one
   stylesheet serves Arabic (RTL) and English (LTR). */

:root {
  /* ---- type */
  --font-ui: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Dubai", "Segoe UI Variable Text", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-latin: "Segoe UI Variable Text", "Segoe UI", "Dubai", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 14.5px;  --fs-base: 15.5px;
  --fs-lg: 17.5px; --fs-xl: 21px;  --fs-2xl: 26px;  --fs-3xl: 32px;
  --lh-tight: 1.3; --lh-snug: 1.5; --lh-body: 1.7;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

  /* ---- space (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- shape */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* ---- layout */
  --sidebar-w: 268px; --sidebar-w-collapsed: 76px; --topbar-h: 64px;
  --content-max: 1480px; --bottom-nav-h: 64px;

  /* ---- motion */
  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --d-fast: 120ms; --d-base: 190ms; --d-slow: 320ms;

  /* ---- colour: light */
  --bg: #F5F3EE;
  --bg-sunken: #EDEAE2;
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --surface-3: #F3F1EB;
  --overlay: rgba(14, 19, 32, .46);

  --text: #141A28;
  --text-2: #465068;
  --text-3: #626C82;
  --text-inverse: #FFFFFF;

  --border: #E3DFD4;
  --border-strong: #CDC7B8;
  --divider: #ECE8DE;

  --primary: #2A4494;
  --primary-hover: #213A80;
  --primary-press: #1A2F6A;
  --primary-soft: #E7EBF8;
  --primary-soft-2: #D5DDF3;
  --primary-text: #213A80;
  --on-primary: #FFFFFF;

  --attn: #C47A0A;
  --attn-soft: #FBF0D9;
  --attn-border: #EBCF93;
  --attn-text: #81530A;

  --success: #0E7A5E;
  --success-soft: #DEF2EA;
  --success-text: #0A5E48;

  --danger: #C23A2F;
  --danger-soft: #FBE8E5;
  --danger-text: #96281F;

  --info: #0B6AA0;
  --info-soft: #E0EFF8;
  --info-text: #0A5483;

  --neutral-soft: #ECE9E0;
  --neutral-text: #4A5266;

  --focus: rgba(42, 68, 148, .42);

  /* the eight workflow stages: muted, distinct, never decorative */
  --st-0: #66708A;  /* intake */
  --st-1: #2A6EB0;  /* research */
  --st-2: #0E8C86;  /* audience */
  --st-3: #4251B5;  /* strategy */
  --st-4: #C47A0A;  /* channels */
  --st-5: #BA4A63;  /* content */
  --st-6: #2E8648;  /* media & budget */
  --st-7: #141A28;  /* final */

  /* content calendar channels */
  --ch-instagram: #BA4A63; --ch-tiktok: #141A28; --ch-whatsapp: #2E8648;
  --ch-email: #2A6EB0;     --ch-web: #C47A0A;    --ch-snapchat: #D2A11A;

  --shadow-1: 0 1px 2px rgba(20, 26, 40, .06), 0 1px 1px rgba(20, 26, 40, .04);
  --shadow-2: 0 6px 16px -4px rgba(20, 26, 40, .10), 0 2px 5px rgba(20, 26, 40, .05);
  --shadow-3: 0 18px 40px -10px rgba(20, 26, 40, .22), 0 6px 14px -4px rgba(20, 26, 40, .10);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0B101B;
  --bg-sunken: #080C15;
  --surface: #121927;
  --surface-2: #162033;
  --surface-3: #1B263B;
  --overlay: rgba(3, 6, 12, .66);

  --text: #E9ECF4;
  --text-2: #B0B8CC;
  --text-3: #8F99B1;
  --text-inverse: #0B101B;

  --border: #232E45;
  --border-strong: #31405F;
  --divider: #1C2740;

  --primary: #8EA8F2;
  --primary-hover: #A5BAF6;
  --primary-press: #B9C9F9;
  --primary-soft: #1C2A52;
  --primary-soft-2: #25376B;
  --primary-text: #B7C7F8;
  --on-primary: #0A1230;

  --attn: #E9B04B;
  --attn-soft: #33270E;
  --attn-border: #5C4514;
  --attn-text: #F0C77A;

  --success: #4CC2A0;
  --success-soft: #0F2F28;
  --success-text: #7DDCBF;

  --danger: #F0857B;
  --danger-soft: #3A1815;
  --danger-text: #F6A8A0;

  --info: #62B4E6;
  --info-soft: #0E2B3F;
  --info-text: #8FCDF1;

  --neutral-soft: #1D2740;
  --neutral-text: #B0B8CC;

  --focus: rgba(142, 168, 242, .5);

  --st-0: #8E98B0; --st-1: #69A8E8; --st-2: #45C2BB; --st-3: #8A97F0;
  --st-4: #E9B04B; --st-5: #E88AA2; --st-6: #62C57F; --st-7: #E9ECF4;
  --ch-instagram: #E88AA2; --ch-tiktok: #E9ECF4; --ch-whatsapp: #62C57F;
  --ch-email: #69A8E8;     --ch-web: #E9B04B;    --ch-snapchat: #E8C95A;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 20px -6px rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .3);
  --shadow-3: 0 22px 48px -10px rgba(0, 0, 0, .7), 0 6px 14px -4px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* English reads in the Latin-first stack */
[lang="en"] { --font-ui: var(--font-latin); }

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; }
}