/* ============================================================
   ASC — Colors & Type tokens
   Brand: deep "ametista" purple + clean Satoshi typography.
   Sampled from official logo (#5C2178) and PIV ASC brand kit.
   ============================================================ */

/* ---------- Webfonts (Satoshi, self-hosted) ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
:root {
  /* ---------- Brand palette ---------- */
  --asc-purple-50:  #F6F0FB;
  --asc-purple-100: #ECDCF5;
  --asc-purple-200: #D8B7EB;
  --asc-purple-300: #BD8AD9;
  --asc-purple-400: #9A5BC2;
  --asc-purple-500: #7A37A4;   /* hover / link */
  --asc-purple-600: #5C2178;   /* PRIMARY — ASC ametista (from logo) */
  --asc-purple-700: #4A1A62;
  --asc-purple-800: #38134A;
  --asc-purple-900: #240C30;
  --asc-purple-950: #160620;

  /* Accent — used sparingly for highlights / AI moments */
  --asc-lilac-400:  #B388E0;
  --asc-magenta-500:#A02DB0;   /* gradient companion */

  /* ---------- Neutrals (cool warm gray) ---------- */
  --asc-ink-0:   #FFFFFF;
  --asc-ink-25:  #FAFAFB;
  --asc-ink-50:  #F4F4F6;
  --asc-ink-100: #EBEBEF;
  --asc-ink-200: #DCDCE3;
  --asc-ink-300: #C2C2CD;
  --asc-ink-400: #9A9AA8;
  --asc-ink-500: #71717F;
  --asc-ink-600: #52525E;
  --asc-ink-700: #3A3A44;
  --asc-ink-800: #25252D;
  --asc-ink-900: #16161C;
  --asc-ink-950: #0B0B11;

  /* ---------- Semantic ---------- */
  --asc-success-50:  #ECFDF3;
  --asc-success-500: #12B76A;
  --asc-success-700: #027A48;

  --asc-warning-50:  #FFFAEB;
  --asc-warning-500: #F79009;
  --asc-warning-700: #B54708;

  --asc-danger-50:   #FEF3F2;
  --asc-danger-500:  #F04438;
  --asc-danger-700:  #B42318;

  --asc-info-50:     #EFF8FF;
  --asc-info-500:    #2E90FA;
  --asc-info-700:    #175CD3;

  /* Channel hues — omnichannel chips */
  --asc-ch-whatsapp:  #25D366;
  --asc-ch-instagram: #E1306C;
  --asc-ch-messenger: #0084FF;
  --asc-ch-telegram:  #229ED9;
  --asc-ch-email:     #6366F1;
  --asc-ch-webchat:   var(--asc-purple-600);
  --asc-ch-sms:       #14B8A6;
  --asc-ch-voice:     #F59E0B;

  /* ---------- Semantic surface / text (LIGHT) ---------- */
  --asc-bg:           var(--asc-ink-25);
  --asc-bg-elev:      var(--asc-ink-0);
  --asc-bg-subtle:    var(--asc-ink-50);
  --asc-bg-muted:     var(--asc-ink-100);
  --asc-bg-inverse:   var(--asc-ink-900);
  --asc-bg-brand:     var(--asc-purple-600);
  --asc-bg-brand-soft:var(--asc-purple-50);

  --asc-fg:           var(--asc-ink-900);
  --asc-fg-strong:    var(--asc-ink-950);
  --asc-fg-muted:     var(--asc-ink-600);
  --asc-fg-subtle:    var(--asc-ink-400);
  --asc-fg-onbrand:   var(--asc-ink-0);
  --asc-fg-onbrand-soft: var(--asc-purple-700);
  --asc-fg-brand:     var(--asc-purple-600);
  --asc-fg-link:      var(--asc-purple-600);

  --asc-border:       var(--asc-ink-200);
  --asc-border-strong:var(--asc-ink-300);
  --asc-border-brand: var(--asc-purple-200);
  --asc-divider:      var(--asc-ink-100);
  --asc-focus-ring:   color-mix(in srgb, var(--asc-purple-500) 45%, transparent);

  /* ---------- Radii ---------- */
  --asc-r-xs: 4px;
  --asc-r-sm: 6px;
  --asc-r-md: 10px;
  --asc-r-lg: 14px;
  --asc-r-xl: 20px;
  --asc-r-2xl: 28px;
  --asc-r-pill: 999px;

  /* ---------- Spacing (4pt base) ---------- */
  --asc-s-1: 4px;
  --asc-s-2: 8px;
  --asc-s-3: 12px;
  --asc-s-4: 16px;
  --asc-s-5: 20px;
  --asc-s-6: 24px;
  --asc-s-8: 32px;
  --asc-s-10: 40px;
  --asc-s-12: 48px;
  --asc-s-16: 64px;
  --asc-s-20: 80px;
  --asc-s-24: 96px;

  /* ---------- Shadows ---------- */
  --asc-shadow-xs: 0 1px 2px 0 rgba(22, 22, 28, 0.05);
  --asc-shadow-sm: 0 1px 3px 0 rgba(22, 22, 28, 0.08), 0 1px 2px -1px rgba(22, 22, 28, 0.06);
  --asc-shadow-md: 0 6px 14px -4px rgba(22, 22, 28, 0.10), 0 2px 4px -2px rgba(22, 22, 28, 0.06);
  --asc-shadow-lg: 0 18px 32px -12px rgba(22, 22, 28, 0.14), 0 8px 12px -6px rgba(22, 22, 28, 0.08);
  --asc-shadow-xl: 0 28px 56px -16px rgba(22, 22, 28, 0.20);
  --asc-shadow-brand: 0 12px 28px -10px color-mix(in srgb, var(--asc-purple-600) 55%, transparent);
  --asc-shadow-inset: inset 0 1px 0 0 rgba(255,255,255,0.6);

  /* ---------- Gradients ---------- */
  --asc-grad-brand:   linear-gradient(135deg, #4A1A62 0%, #5C2178 45%, #A02DB0 100%);
  --asc-grad-aurora:  radial-gradient(120% 80% at 10% 0%, #7A37A4 0%, transparent 55%),
                      radial-gradient(100% 90% at 100% 100%, #A02DB0 0%, transparent 50%),
                      linear-gradient(180deg, #2A0F3A 0%, #5C2178 100%);
  --asc-grad-soft:    linear-gradient(180deg, var(--asc-purple-50) 0%, var(--asc-ink-0) 100%);

  /* ---------- Type system ---------- */
  --asc-font-sans: "Satoshi", "Satoshi Var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --asc-font-display: "Satoshi", "Satoshi Var", ui-sans-serif, system-ui, sans-serif;
  --asc-font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (1.200 minor third) */
  --asc-fs-xs:    12px;
  --asc-fs-sm:    13px;
  --asc-fs-base:  15px;
  --asc-fs-md:    16px;
  --asc-fs-lg:    18px;
  --asc-fs-xl:    20px;
  --asc-fs-2xl:   24px;
  --asc-fs-3xl:   30px;
  --asc-fs-4xl:   36px;
  --asc-fs-5xl:   48px;
  --asc-fs-6xl:   60px;
  --asc-fs-7xl:   76px;

  --asc-lh-tight:   1.1;
  --asc-lh-snug:    1.25;
  --asc-lh-normal:  1.5;
  --asc-lh-loose:   1.7;

  --asc-tracking-display: -0.02em;
  --asc-tracking-tight:   -0.01em;
  --asc-tracking-normal:   0;
  --asc-tracking-wide:    0.02em;
  --asc-tracking-allcaps: 0.08em;

  --asc-fw-light:   300;
  --asc-fw-regular: 400;
  --asc-fw-medium:  500;
  --asc-fw-bold:    700;
  --asc-fw-black:   900;

  /* ---------- Motion ---------- */
  --asc-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --asc-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --asc-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --asc-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --asc-dur-fast:   120ms;
  --asc-dur-base:   200ms;
  --asc-dur-slow:   320ms;
  --asc-dur-xslow:  560ms;
}

/* ---------- DARK MODE ---------- */
:root[data-theme="dark"], .asc-dark {
  --asc-bg:           #0B0810;
  --asc-bg-elev:      #15101C;
  --asc-bg-subtle:    #1B1525;
  --asc-bg-muted:     #241B30;
  --asc-bg-inverse:   var(--asc-ink-0);
  --asc-bg-brand:     var(--asc-purple-500);
  --asc-bg-brand-soft:#241632;

  --asc-fg:           #F2EEF8;
  --asc-fg-strong:    #FFFFFF;
  --asc-fg-muted:     #B6AFC4;
  --asc-fg-subtle:    #7E7790;
  --asc-fg-onbrand:   #FFFFFF;
  --asc-fg-brand:     #C8A4E4;
  --asc-fg-link:      #D9B9F0;

  --asc-border:       #2A2235;
  --asc-border-strong:#3A2F4A;
  --asc-border-brand: #4A2A66;
  --asc-divider:      #221A2C;

  --asc-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.4);
  --asc-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4);
  --asc-shadow-md: 0 6px 14px -4px rgba(0,0,0,0.55), 0 2px 4px -2px rgba(0,0,0,0.4);
  --asc-shadow-lg: 0 18px 32px -12px rgba(0,0,0,0.65), 0 8px 12px -6px rgba(0,0,0,0.5);
  --asc-shadow-xl: 0 28px 56px -16px rgba(0,0,0,0.75);
  --asc-shadow-brand: 0 12px 28px -10px color-mix(in srgb, var(--asc-purple-400) 60%, transparent);
}

/* ---------- Base styles ---------- */
html, body {
  font-family: var(--asc-font-sans);
  font-size: var(--asc-fs-base);
  line-height: var(--asc-lh-normal);
  color: var(--asc-fg);
  background: var(--asc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type roles ---------- */
.asc-display-1, h1.asc-display {
  font-family: var(--asc-font-display);
  font-weight: var(--asc-fw-black);
  font-size: clamp(48px, 6vw, var(--asc-fs-7xl));
  line-height: var(--asc-lh-tight);
  letter-spacing: var(--asc-tracking-display);
  color: var(--asc-fg-strong);
}
.asc-display-2 {
  font-family: var(--asc-font-display);
  font-weight: var(--asc-fw-bold);
  font-size: clamp(36px, 4.5vw, var(--asc-fs-6xl));
  line-height: var(--asc-lh-tight);
  letter-spacing: var(--asc-tracking-display);
  color: var(--asc-fg-strong);
}
.asc-h1, h1 {
  font-weight: var(--asc-fw-bold);
  font-size: var(--asc-fs-5xl);
  line-height: var(--asc-lh-tight);
  letter-spacing: var(--asc-tracking-tight);
  color: var(--asc-fg-strong);
}
.asc-h2, h2 {
  font-weight: var(--asc-fw-bold);
  font-size: var(--asc-fs-4xl);
  line-height: var(--asc-lh-snug);
  letter-spacing: var(--asc-tracking-tight);
  color: var(--asc-fg-strong);
}
.asc-h3, h3 {
  font-weight: var(--asc-fw-bold);
  font-size: var(--asc-fs-3xl);
  line-height: var(--asc-lh-snug);
  letter-spacing: var(--asc-tracking-tight);
  color: var(--asc-fg-strong);
}
.asc-h4, h4 {
  font-weight: var(--asc-fw-medium);
  font-size: var(--asc-fs-2xl);
  line-height: var(--asc-lh-snug);
  color: var(--asc-fg-strong);
}
.asc-h5, h5 {
  font-weight: var(--asc-fw-medium);
  font-size: var(--asc-fs-xl);
  line-height: var(--asc-lh-snug);
  color: var(--asc-fg-strong);
}
.asc-eyebrow {
  font-weight: var(--asc-fw-medium);
  font-size: var(--asc-fs-xs);
  letter-spacing: var(--asc-tracking-allcaps);
  text-transform: uppercase;
  color: var(--asc-fg-brand);
}
.asc-lead, p.asc-lead {
  font-size: var(--asc-fs-lg);
  line-height: var(--asc-lh-loose);
  color: var(--asc-fg-muted);
}
.asc-body, p {
  font-size: var(--asc-fs-base);
  line-height: var(--asc-lh-normal);
  color: var(--asc-fg);
}
.asc-small, small {
  font-size: var(--asc-fs-sm);
  color: var(--asc-fg-muted);
}
.asc-caption {
  font-size: var(--asc-fs-xs);
  color: var(--asc-fg-subtle);
}
.asc-code, code, kbd, pre {
  font-family: var(--asc-font-mono);
  font-size: 0.9em;
}
a, .asc-link {
  color: var(--asc-fg-link);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--asc-dur-fast) var(--asc-ease-standard);
}
a:hover, .asc-link:hover { color: var(--asc-purple-500); text-decoration: underline; }