/* Design tokens: colors, spacing, type, radii, shadows.
   Colors come in three blocks that must stay identical: light (default), dark through the phone setting,
   and dark chosen by the person (data-theme="dark"). */

:root {
  /* ---- fixed (same in every theme) ---- */
  --brand-purple: #6d3beb;
  --brand-deep: #3e1a9e;
  --brand-soft: #efe9ff;
  --brand-gold: #e7a22a;
  --brand-pink: #f43f7f;

  --font-ui: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-line: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --tap: 44px; /* smallest touch target */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;

  --sidebar-w: 264px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --content-max: 1180px;
  --gutter: 16px;

  --z-sticky: 20;
  --z-topbar: 30;
  --z-tabbar: 40;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  color-scheme: light;

  /* ---- colors: light ---- */
  --c-bg: #f6f3fd;
  --c-surface: #ffffff;
  --c-surface-2: #f1edfb;
  --c-surface-3: #e8e2f7;
  --c-border: #e3ddf2;
  --c-border-strong: #cfc6e6;
  --c-overlay: rgba(24, 12, 56, 0.5);

  --c-text: #1d1633;
  --c-text-2: #50466b;
  --c-text-3: #6a6085;
  --c-text-inverse: #ffffff;

  --c-primary: #6d3beb;
  --c-primary-hover: #5b2bd6;
  --c-primary-active: #4d22bb;
  --c-primary-deep: #3e1a9e;
  --c-primary-soft: #efe9ff;
  --c-primary-soft-hover: #e4dbff;
  --c-primary-text: #5b2bd6; /* links and small purple text on surfaces */
  --c-on-primary: #ffffff;

  --c-accent: #e7a22a;
  --c-accent-soft: #fdf0d5;
  --c-accent-text: #7a4b00;
  --c-pink: #f43f7f;
  --c-pink-soft: #ffe4ee;
  --c-pink-text: #b3235b;

  --c-success: #15803d;
  --c-success-soft: #e7f6ec;
  --c-success-text: #166534;
  --c-warning: #b45309;
  --c-warning-soft: #fef3dc;
  --c-warning-text: #92400e;
  --c-danger: #c81e3e;
  --c-danger-hover: #a3152f;
  --c-danger-soft: #fde8ec;
  --c-danger-text: #a3152f;
  --c-info: #0369a1;
  --c-info-soft: #e0f2fe;
  --c-info-text: #0c5a86;

  --c-focus: #6d3beb;
  --c-skeleton: #ebe6f7;
  --c-skeleton-shine: #f6f3fd;

  --c-sidebar-from: #4a22b8;
  --c-sidebar-to: #2b1170;
  --c-sidebar-text: #ffffff;
  --c-sidebar-dim: #d8ccff;
  --c-sidebar-hover: rgba(255, 255, 255, 0.1);
  --c-sidebar-active: rgba(255, 255, 255, 0.18);

  --shadow-1: 0 1px 2px rgba(45, 20, 110, 0.06), 0 1px 3px rgba(45, 20, 110, 0.06);
  --shadow-2: 0 4px 12px rgba(45, 20, 110, 0.08), 0 2px 4px rgba(45, 20, 110, 0.05);
  --shadow-3: 0 16px 40px rgba(45, 20, 110, 0.18), 0 4px 12px rgba(45, 20, 110, 0.08);
  --shadow-ring: 0 0 0 3px rgba(109, 59, 235, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg: #120d20;
    --c-surface: #1c1631;
    --c-surface-2: #251d42;
    --c-surface-3: #2e2552;
    --c-border: #33295a;
    --c-border-strong: #4a3d7c;
    --c-overlay: rgba(6, 3, 16, 0.7);

    --c-text: #f3eeff;
    --c-text-2: #c3b8e0;
    --c-text-3: #9c90bd;
    --c-text-inverse: #120d20;

    --c-primary: #7c4dff;
    --c-primary-hover: #8d63ff;
    --c-primary-active: #6d3beb;
    --c-primary-deep: #d9ccff;
    --c-primary-soft: #2c2150;
    --c-primary-soft-hover: #382a66;
    --c-primary-text: #b79cff;
    --c-on-primary: #ffffff;

    --c-accent: #f0b34a;
    --c-accent-soft: #3a2a0c;
    --c-accent-text: #fcd34d;
    --c-pink: #ff5c93;
    --c-pink-soft: #3d1830;
    --c-pink-text: #ff9cbc;

    --c-success: #4ade80;
    --c-success-soft: #12301f;
    --c-success-text: #6ee7a0;
    --c-warning: #fbbf24;
    --c-warning-soft: #3a2a0c;
    --c-warning-text: #fcd34d;
    --c-danger: #d92d4a;
    --c-danger-hover: #ec3f5c;
    --c-danger-soft: #3d1520;
    --c-danger-text: #ff8ca0;
    --c-info: #38bdf8;
    --c-info-soft: #0c2a3c;
    --c-info-text: #7dd3fc;

    --c-focus: #b79cff;
    --c-skeleton: #2a2148;
    --c-skeleton-shine: #352a5e;

    --c-sidebar-from: #1f1146;
    --c-sidebar-to: #150b30;
    --c-sidebar-text: #f3eeff;
    --c-sidebar-dim: #b9abe3;
    --c-sidebar-hover: rgba(255, 255, 255, 0.08);
    --c-sidebar-active: rgba(124, 77, 255, 0.32);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-ring: 0 0 0 3px rgba(183, 156, 255, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg: #120d20;
  --c-surface: #1c1631;
  --c-surface-2: #251d42;
  --c-surface-3: #2e2552;
  --c-border: #33295a;
  --c-border-strong: #4a3d7c;
  --c-overlay: rgba(6, 3, 16, 0.7);

  --c-text: #f3eeff;
  --c-text-2: #c3b8e0;
  --c-text-3: #9c90bd;
  --c-text-inverse: #120d20;

  --c-primary: #7c4dff;
  --c-primary-hover: #8d63ff;
  --c-primary-active: #6d3beb;
  --c-primary-deep: #d9ccff;
  --c-primary-soft: #2c2150;
  --c-primary-soft-hover: #382a66;
  --c-primary-text: #b79cff;
  --c-on-primary: #ffffff;

  --c-accent: #f0b34a;
  --c-accent-soft: #3a2a0c;
  --c-accent-text: #fcd34d;
  --c-pink: #ff5c93;
  --c-pink-soft: #3d1830;
  --c-pink-text: #ff9cbc;

  --c-success: #4ade80;
  --c-success-soft: #12301f;
  --c-success-text: #6ee7a0;
  --c-warning: #fbbf24;
  --c-warning-soft: #3a2a0c;
  --c-warning-text: #fcd34d;
  --c-danger: #d92d4a;
  --c-danger-hover: #ec3f5c;
  --c-danger-soft: #3d1520;
  --c-danger-text: #ff8ca0;
  --c-info: #38bdf8;
  --c-info-soft: #0c2a3c;
  --c-info-text: #7dd3fc;

  --c-focus: #b79cff;
  --c-skeleton: #2a2148;
  --c-skeleton-shine: #352a5e;

  --c-sidebar-from: #1f1146;
  --c-sidebar-to: #150b30;
  --c-sidebar-text: #f3eeff;
  --c-sidebar-dim: #b9abe3;
  --c-sidebar-hover: rgba(255, 255, 255, 0.08);
  --c-sidebar-active: rgba(124, 77, 255, 0.32);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-ring: 0 0 0 3px rgba(183, 156, 255, 0.4);
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (max-width: 599px) {
  :root {
    --topbar-h: 56px;
  }
}