/* =====================================================================
   glacierr — colors & type
   Single source of truth for design tokens.
   Pulled from web/styles.css (lifted verbatim where possible).
   ===================================================================== */

/* ---------- Webfonts ---------- */
/* Body */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* Display — STXihei (华文细黑). Licensed font, hot-linked from the
   onlinewebfonts CDN, same as production. Local fallbacks first. */
@font-face {
  font-family: "STXihei";
  src: local("STXihei"), local("华文细黑"),
       url("https://db.onlinewebfonts.com/t/165fd6b4666591f4ac2765c4ed1c0b4a.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/165fd6b4666591f4ac2765c4ed1c0b4a.woff")  format("woff"),
       url("https://db.onlinewebfonts.com/t/165fd6b4666591f4ac2765c4ed1c0b4a.ttf")   format("truetype");
  font-display: swap;
}

:root {
  /* =================================================================
     COLOR — neutrals (the canvas)
     ================================================================= */
  --bg:            #2c2c2c;   /* page background, card surface */
  --bg-elevated:   #383838;   /* "got an idea?" card — flatter, no animated border */
  --bg-footer:     #222222;   /* footer band */
  --fg:            #dbdbdb;   /* body copy on dark */
  --fg-strong:     #ffffff;   /* h1, primary marks */
  --fg-muted:      #c8c8c8;   /* muted wordmark / secondary */
  --fg-dim:        rgba(255, 255, 255, 0.45);   /* footer links, legal meta */
  --fg-dimmer:     rgba(255, 255, 255, 0.4);    /* .subtext on agent headers */

  --hairline:      rgba(255, 255, 255, 0.06);   /* footer top border */
  --hairline-soft: rgba(255, 255, 255, 0.15);   /* nav divider */
  --field-bg:      rgba(255, 255, 255, 0.04);
  --field-border:  rgba(255, 255, 255, 0.10);
  --field-focus:   rgba(95, 251, 241, 0.45);    /* cyan focus ring */

  /* =================================================================
     COLOR — the gradient palette
     Used everywhere identity matters: hero bg, button fills, .gradient-text,
     card border conic, focus accents. ALWAYS in this order.
     ================================================================= */
  --grad-pink:   #d16ba5;
  --grad-blue:   #86a8e7;
  --grad-cyan:   #5ffbf1;   /* also the standalone accent — focus, links */
  --grad-amber:  #ffb86b;

  --accent:        var(--grad-cyan);   /* link color, focus, logo fill */
  --danger:        #ff6b6b;            /* .form-error */

  --gradient-linear: linear-gradient(-45deg,
    var(--grad-pink), var(--grad-blue), var(--grad-cyan), var(--grad-amber));
  --gradient-linear-loop: linear-gradient(-45deg,
    var(--grad-pink), var(--grad-blue), var(--grad-cyan),
    var(--grad-amber), var(--grad-pink));
  --gradient-conic: conic-gradient(from var(--angle, 0deg),
    var(--grad-pink), var(--grad-blue), var(--grad-cyan),
    var(--grad-amber), var(--grad-pink));

  /* =================================================================
     TYPE — families
     ================================================================= */
  --font-display: "STXihei", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;

  /* =================================================================
     TYPE — scale (rem, base 16px)
     Lifted from production CSS. All headings are lowercase by rule.
     ================================================================= */
  --fs-h1:    7rem;     /* hero wordmark */
  --fs-h2:    4rem;     /* section title */
  --fs-h3:    2rem;     /* card title */
  --fs-body:  1.25rem;  /* p */
  --fs-lead:  1.5rem;   /* gradient pull-quote */
  --fs-ui:    1.1rem;   /* button label */
  --fs-small: 0.875rem; /* legal copy */
  --fs-meta:  0.85rem;  /* small nav, legal-meta */
  --fs-micro: 0.8rem;   /* footer links */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --tracking-display: 0.04em;   /* h1 wordmark */
  --tracking-ui:      0.02em;   /* buttons */

  /* =================================================================
     SPACING, RADII, SHADOW
     ================================================================= */
  --radius-card:   24px;
  --radius-field:  6px;
  --radius-pill:   999px;
  --radius-favicon: 5px;       /* the rounded 'g' tile */

  --shadow-card:   0 0 25px 4px rgba(255, 255, 255, 0.05);
  --shadow-card-hi: 0 0 25px 4px rgba(255, 255, 255, 0.10);   /* two-column boxes */
  --shadow-pill-hover: 0 0 16px rgba(134, 168, 231, 0.30),
                        0 0 32px rgba(95, 251, 241, 0.12);
  --glow-h1: 0 0 10px rgba(255,255,255,.6),
             0 0 30px rgba(255,255,255,.3),
             0 0 60px rgba(255,255,255,.15);
  --glow-h2: 0 0 12px rgba(255,255,255,.1);

  --measure: min(860px, 88vw);   /* canonical content width */

  /* =================================================================
     MOTION
     ================================================================= */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 200ms;
  --dur-med:  300ms;
  --dur-slow: 500ms;
  --dur-gradient-shift: 6s;    /* button gradient drift */
  --dur-gradient-hero:  25s;   /* hero bg drift */
  --dur-border-rotate:  12s;   /* card conic border */
  --dur-blob-morph:     40s;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES — apply to bare HTML so prototypes inherit
   the brand voice without any class plumbing.
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  text-transform: lowercase;
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-display);
  text-shadow: var(--glow-h1);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  text-align: left;
  text-shadow: var(--glow-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
}

p {
  font-size: var(--fs-body);
  opacity: 0.85;
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--grad-cyan); color: var(--bg); }

/* Utility — drop-in gradient ink */
.gradient-text {
  background: var(--gradient-linear);
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientAnimation 18s ease infinite;
}

@keyframes gradientAnimation {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}