:root {

  --brand-blue:        #3957ff;
  --brand-blue-600:    #2e46cc;
  --brand-blue-400:    #6478ff;
  --brand-indigo:      #4054b2;
  --brand-sky:         #6ec1e4;
  --brand-ink:         #141414;
  --brand-dark-bg:     #0b0d16;

  --color-success:     #23a455;
  --color-warning:     #fcb900;
  --color-danger:      #cf2e2e;
  --color-info:        var(--brand-sky);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-btn: var(--radius-md);
  --radius-pill: 9999px;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;
  --line-base: 1.5;
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  --app-font-base: 14px;
  --app-line-base: 20px;
  --app-font-sm:   12px;
  --app-line-sm:   16px;
  --app-h1: 24px;
  --app-h2: 20px;
  --app-h3: 18px;

  --color-primary:        var(--brand-blue);
  --color-primary-hover:  var(--brand-blue-600);
  --color-on-primary:     #ffffff;

  --light-bg:             #ffffff;
  --light-surface:        #f7f8fb;
  --light-surface-2:      #eef1f6;
  --light-text:           var(--brand-ink);
  --light-text-body:      #3f4754;
  --light-text-muted:     #54595f;
  --light-text-subtle:    #7a7a7a;
  --light-border:         #d9dee8;
  --light-link:           var(--brand-blue);

  --color-bg:             var(--light-bg);
  --color-surface:        var(--light-surface);
  --color-surface-2:      var(--light-surface-2);
  --color-text:           var(--light-text);
  --color-text-body:      var(--light-text-body);
  --color-text-muted:     var(--light-text-muted);
  --color-text-subtle:    var(--light-text-subtle);
  --color-border:         var(--light-border);
  --color-link:           var(--light-link);

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.10);
  --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.14);

  --w-canvas:      #FFFFFF;
  --w-paper:       #F6F5F2;
  --w-paper-deep:  #ECEAE4;
  --w-navy:        #1F2A44;
  --w-navy-deep:   #19223A;

  --w-ink:         #1F2A44;
  --w-ink-muted:   #57607A;
  --w-on-dark:     #FFFFFF;
  --w-on-dark-muted: #AEB6C8;

  --w-accent:         #E8262D;
  --w-accent-down:    #C81E24;
  --w-accent-pressed: #A81319;

  --w-hairline:      #E4E2DC;
  --w-hairline-dark: #33405E;

  --w-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --w-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --w-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --w-shadow-report: 0 24px 60px -24px rgba(31, 42, 68, 0.35);

  --w-ease:        cubic-bezier(.2,.6,.2,1);
  --w-reveal-dur:  240ms;
}

:root[data-theme="dark"] {
  --color-primary:        var(--brand-blue);
  --color-primary-hover:  var(--brand-blue-400);
  --color-on-primary:     #ffffff;

  --color-bg:             var(--brand-dark-bg);
  --color-surface:        #141826;
  --color-surface-2:      #1c2233;
  --color-text:           #e8edf5;
  --color-text-muted:     #aab3c5;
  --color-text-subtle:    #7e879b;
  --color-border:         #2a3147;
  --color-link:           var(--brand-blue-400);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary-hover:  var(--brand-blue-400);
    --color-bg:             var(--brand-dark-bg);
    --color-surface:        #141826;
    --color-surface-2:      #1c2233;
    --color-text:           #e8edf5;
    --color-text-muted:     #aab3c5;
    --color-text-subtle:    #7e879b;
    --color-border:         #2a3147;
    --color-link:           var(--brand-blue-400);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wsite-surface {
    --color-bg:             var(--light-bg);
    --color-surface:        var(--light-surface);
    --color-surface-2:      var(--light-surface-2);
    --color-text:           var(--light-text);
    --color-text-body:      var(--light-text-body);
    --color-text-muted:     var(--light-text-muted);
    --color-text-subtle:    var(--light-text-subtle);
    --color-border:         var(--light-border);
    --color-link:           var(--light-link);
  }
}
:root[data-theme="dark"] .wsite-surface {
  --color-bg:             var(--light-bg);
  --color-surface:        var(--light-surface);
  --color-surface-2:      var(--light-surface-2);
  --color-text:           var(--light-text);
  --color-text-body:      var(--light-text-body);
  --color-text-muted:     var(--light-text-muted);
  --color-text-subtle:    var(--light-text-subtle);
  --color-border:         var(--light-border);
  --color-link:           var(--light-link);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:has(> .wsite-surface) { background: var(--light-bg); }
}
:root[data-theme="dark"] body:has(> .wsite-surface) { background: var(--light-bg); }