/* SYLVEX Web — design tokens.
   Light is the default brand surface (matches the Lovable reference); a dark
   mode is available via [data-theme="dark"] for the Appearance setting. */
:root{
  color-scheme:light;
  --sx-bg:#ffffff;
  --sx-bg-2:#f6f6f8;
  --sx-bg-3:#eeeef2;
  --sx-surface:#ffffff;
  --sx-surface-raised:#ffffff;
  --sx-border:#e4e4e9;
  --sx-border-strong:#d3d3da;
  --sx-text:#0b0b0d;
  --sx-text-dim:#55565f;
  --sx-text-mute:#8a8b94;
  --sx-invert-text:#ffffff;
  --sx-accent:#078067;
  --sx-accent-strong:#056653;
  --sx-accent-2:#12c4c9;
  --sx-accent-bg:rgba(7,128,103,.10);
  --sx-accent-text:#ffffff;
  --sx-accent-glow:rgba(18,196,201,.35);
  --sx-accent-gradient:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent));
  --sx-danger:#e0432f;
  --sx-success:#1f9d5c;

  --sx-shadow-sm:0 1px 2px rgba(15,15,20,.06);
  --sx-shadow-md:0 8px 24px rgba(15,15,20,.08);
  --sx-shadow-lg:0 24px 60px rgba(15,15,20,.12);
  --sx-depth-inset:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(15,15,20,.04);

  --sx-radius-sm:10px;
  --sx-radius-md:16px;
  --sx-radius-lg:24px;
  --sx-radius-pill:999px;

  --sx-font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sx-container:1240px;
  --sx-gutter:24px;

  --sx-ease:cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --sx-bg:#0a0a0c;
  --sx-bg-2:#111114;
  --sx-bg-3:#18181c;
  --sx-surface:#131316;
  --sx-surface-raised:#18181c;
  --sx-border:#232328;
  --sx-border-strong:#303038;
  --sx-text:#f4f4f6;
  --sx-text-dim:#b7b8c2;
  --sx-text-mute:#7c7d87;
  --sx-invert-text:#0b0b0d;
  --sx-accent:#2fe0b8;
  --sx-accent-strong:#20c5a0;
  --sx-accent-2:#37d0e6;
  --sx-accent-bg:rgba(47,224,184,.14);
  --sx-accent-text:#06120d;
  --sx-accent-glow:rgba(55,208,230,.45);
  --sx-accent-gradient:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent));
  --sx-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --sx-shadow-md:0 8px 24px rgba(0,0,0,.45);
  --sx-shadow-lg:0 24px 70px rgba(0,0,0,.55);
  --sx-depth-inset:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.3);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme:dark;
    --sx-bg:#0a0a0c;
    --sx-bg-2:#111114;
    --sx-bg-3:#18181c;
    --sx-surface:#131316;
    --sx-surface-raised:#18181c;
    --sx-border:#232328;
    --sx-border-strong:#303038;
    --sx-text:#f4f4f6;
    --sx-text-dim:#b7b8c2;
    --sx-text-mute:#7c7d87;
    --sx-invert-text:#0b0b0d;
    --sx-accent:#2fe0b8;
    --sx-accent-strong:#20c5a0;
    --sx-accent-2:#37d0e6;
    --sx-accent-bg:rgba(47,224,184,.14);
    --sx-accent-text:#06120d;
    --sx-accent-glow:rgba(55,208,230,.45);
    --sx-accent-gradient:linear-gradient(135deg, var(--sx-accent-2), var(--sx-accent));
    --sx-shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --sx-shadow-md:0 8px 24px rgba(0,0,0,.45);
    --sx-shadow-lg:0 24px 70px rgba(0,0,0,.55);
    --sx-depth-inset:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.3);
  }
}