/* ==========================================================================
   avocloud · design tokens v2.7.1
   blueprint / CAD monochrome + coral spark
   Generated from tokens.json — edit there, then mirror here.
   Dark = :root default (the site runs dark-first) · html.light overrides
   for a light-first property. See BRANDING.md — v2 supersedes v1 (cream/
   rounded/ASCII system, fully retired).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@600;700;800&display=swap');

:root {
  /* ---- coral ramp (mode-independent) ---- */
  --avo-coral-50:  #FFEEEA;
  --avo-coral-100: #FFD8CF;
  --avo-coral-200: #FFB6A4;
  --avo-coral-300: #FF9379;
  --avo-coral-400: #FF7A5C;
  --avo-coral-500: #FF6B4A;
  --avo-coral-600: #ED5333;
  --avo-coral-700: #C73D20;
  --avo-coral-800: #9C2E16;
  --avo-coral-900: #5F1C0D;

  /* ---- semantic (mode-independent, not used on the marketing site) ---- */
  --avo-success: #46A758;
  --avo-warning: #E0A33A;
  --avo-error:   #DC3838;
  --avo-info:    #3B82C4;

  /* ---- roles · DARK (default — the site runs dark-first) ---- */
  --avo-bg:            #000000;
  --avo-bg-soft:       #060606;
  --avo-surface:       #0A0A0A;
  --avo-border:        rgba(255,255,255,0.10);
  --avo-border-strong: rgba(255,255,255,0.18);
  --avo-text:          #FFFFFF;
  --avo-text-muted:    #7E7E7E;
  --avo-text-muted-2:  #BBBBBB;

  /* one coral, no per-theme swap (v1 swapped 500/700 by theme — dropped,
     see BRANDING.md §3). Small coral text on a LIGHT surface should still
     use --avo-coral-700 by hand for contrast; there is no automatic role
     token for that because it's a sizing-dependent call, not a theme one. */
  --avo-primary:       var(--avo-coral-500);
  --avo-primary-hover: var(--avo-coral-300);
  --avo-primary-on:    #000000; /* text color ON a solid coral fill — black, not white */

  /* ---- typography ---- */
  --avo-font-brand:   'Syne', 'Space Grotesk', sans-serif;      /* wordmark, h1, h2 */
  --avo-font-display: 'Space Grotesk', system-ui, sans-serif;   /* body, UI */
  --avo-font-massive: 'Anton', 'Space Grotesk', sans-serif;     /* stat counters only */
  --avo-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- radius — softened, see BRANDING.md §6 ---- */
  --avo-radius-sharp: 0px;
  --avo-radius-sm: 6px;   /* buttons, inputs, chips */
  --avo-radius-md: 8px;   /* cards, panels */
  --avo-radius-pill: 999px;

  /* ---- space ---- */
  --avo-space-1: 4px;  --avo-space-2: 8px;  --avo-space-3: 12px; --avo-space-4: 16px;
  --avo-space-5: 24px; --avo-space-6: 32px; --avo-space-7: 48px; --avo-space-8: 64px;

  /* ---- layout — see BRANDING.md §6 "Spacing & grid" ---- */
  --avo-maxw:            1180px;
  --avo-container-pad:   clamp(1rem, 4vw, 2.5rem);
  --avo-section-pad-y:   clamp(4rem, 10vw, 8rem);
  --avo-measure:         60ch;

  /* ---- motion — see BRANDING.md §5b -------------------------------------
     Four easing curves and four duration steps, nothing in between. These
     are the CSS half of the system; the JS half (GSAP CustomEase names,
     stagger rates) lives in the website's src/lib/motion.ts. Values must
     match — change one, change both. */
  --avo-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --avo-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --avo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --avo-dur-micro: 0.18s;  /* hover, border, colour, focus */
  --avo-dur-ui:    0.35s;  /* nav state, chips, toggles */
  --avo-dur-enter: 0.7s;   /* scroll entrances */
  --avo-dur-sig:   2.4s;   /* the CAD wordmark reveal, played at 0.6 timeScale */

  /* ---- glass — the surface treatment, see BRANDING.md §6 ----------------
     A lightening of the black canvas plus a blur of what is behind it. The
     drawing must stay readable through it. Continuously animated surfaces use
     --avo-glass-blur-animated instead: backdrop-filter cost scales with
     radius x area and a moving element re-rasterises its backdrop each frame. */
  --avo-glass-blur:          7px;
  --avo-glass-blur-animated: 5px;
  --avo-glass-tint:          rgba(4,4,4,0.28);   /* DARK and mostly transparent */
  --avo-glass-tint-2:        rgba(4,4,4,0.44);
  --avo-glass-edge:          rgba(255,255,255,0.10);

  /* ---- back-compat aliases (existing site uses these) ---- */
  --card:   var(--avo-surface);
  --border: var(--avo-border);
}

html.light {
  /* ---- roles · LIGHT (secondary theme / the mission "cut band" on the site) ---- */
  --avo-bg:            #E8ECEF;
  --avo-bg-soft:       #E8ECEF;
  --avo-surface:       #E8ECEF;
  --avo-border:        rgba(0,0,0,0.14);
  --avo-border-strong: rgba(0,0,0,0.22);
  --avo-text:          #0A0A0A;
  --avo-text-muted:    #555555;
  --avo-text-muted-2:  #555555;

  --avo-primary:       var(--avo-coral-500);
  --avo-primary-hover: var(--avo-coral-300);
  --avo-primary-on:    #000000;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background: var(--avo-bg);
  color: var(--avo-text);
  font-family: var(--avo-font-display);
}
h1, h2 { font-family: var(--avo-font-brand); font-weight: 800; }
h3, h4 { font-family: var(--avo-font-display); font-weight: 600; }

/* ==========================================================================
   Brand components — softened corners (6px controls / 8px boxes), hairline
   borders. Everything else stays at 0 except true circles/pills (see
   tokens.json → radius.note).
   ========================================================================== */

/* coral highlight for key phrases in headlines: <span class="avo-hl">just run</span>
   Large/bold sizes only — see BRANDING.md §3 accessibility note. */
.avo-hl { color: var(--avo-primary); }

/* mono kicker / eyebrow: "// LABEL" */
.avo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--avo-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--avo-text-muted);
}
.avo-kicker::before { content: "//"; color: var(--avo-primary); }

/* primary button — coral fill, BLACK text (not white, see §3) */
.avo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.2rem;
  font-family: var(--avo-font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: var(--avo-primary);
  color: var(--avo-primary-on);
  border: 1px solid var(--avo-primary);
  border-radius: var(--avo-radius-sm);
  transition: background var(--avo-dur-micro) var(--avo-ease-out),
              border-color var(--avo-dur-micro) var(--avo-ease-out),
              transform 0.06s;
}
.avo-btn:hover { background: var(--avo-primary-hover); border-color: var(--avo-primary-hover); }
.avo-btn:active { transform: translateY(1px); }

/* ghost button */
.avo-btn-ghost {
  background: transparent;
  border: 1px solid var(--avo-border-strong);
  color: var(--avo-text);
}
.avo-btn-ghost:hover { border-color: var(--avo-primary); background: rgba(255,107,74,0.08); }

/* tag / badge (mono, coral fill) — the one deliberately-rounded exception */
.avo-tag {
  display: inline-block;
  font-family: var(--avo-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: var(--avo-radius-pill);
  background: var(--avo-primary);
  color: var(--avo-primary-on);
}

/* bracket chip: "[ label ]" — literal brackets in coral */
.avo-chip {
  border-radius: var(--avo-radius-sm);
  display: inline-flex;
  align-items: center;
  font-family: var(--avo-font-mono);
  font-size: 0.72rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--avo-border);
  color: var(--avo-text);
}
.avo-chip::before { content: "["; color: var(--avo-primary); margin-right: 0.15em; opacity: 0.7; }
.avo-chip::after  { content: "]"; color: var(--avo-primary); margin-left: 0.15em; opacity: 0.7; }

/* link */
.avo-link {
  color: var(--avo-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* input / textarea / select */
.avo-input {
  font-family: var(--avo-font-mono);
  font-size: 0.85rem;
  padding: 0.55rem 0.75rem;
  background: transparent;
  color: var(--avo-text);
  border: 1px solid var(--avo-border-strong);
  border-radius: var(--avo-radius-sm);
}
.avo-input:focus { outline: none; border-color: var(--avo-primary); }

/* card — hairline border, coral corner-mark on hover */
.avo-card {
  position: relative;
  background: var(--avo-surface);
  border: 1px solid var(--avo-border);
  border-radius: var(--avo-radius-md);
  padding: var(--avo-space-4);
  overflow: hidden;
  transition: border-color var(--avo-dur-ui) var(--avo-ease-out);
}
.avo-card:hover { border-color: var(--avo-border-strong); }
/* Corner marks scale out of their own corner rather than only fading — a CAD
   registration mark being struck. transform-origin is set per-corner below. */
.avo-card .mk {
  position: absolute; width: 8px; height: 8px;
  opacity: 0; transform: scale(0.2);
  transition: opacity var(--avo-dur-micro) var(--avo-ease-out),
              transform var(--avo-dur-ui) var(--avo-ease-spring);
}
.avo-card:hover .mk { opacity: 1; transform: scale(1); }
/* Concentric with the card's corner: inset 4px inside an 8px radius means the
   mark's own bend is 8 - 4 = 4px. Square marks cut across the rounded corner. */
.avo-card .mk.tl { top: 4px; left: 4px; border-top: 1px solid var(--avo-primary); border-left: 1px solid var(--avo-primary); border-top-left-radius: 4px; transform-origin: top left; }
.avo-card .mk.br { bottom: 4px; right: 4px; border-bottom: 1px solid var(--avo-primary); border-right: 1px solid var(--avo-primary); border-bottom-right-radius: 4px; transform-origin: bottom right; }

/* animated gradient bar — coral ramp */
.avo-topbar {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--avo-coral-700), var(--avo-coral-500), var(--avo-coral-300), var(--avo-coral-500), var(--avo-coral-700));
  background-size: 300% 100%;
  animation: avo-bar 8s ease infinite;
}
@keyframes avo-bar {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================================================
   Focus — see BRANDING.md §12.
   Coral outline, offset so it never sits on top of the component's own
   hairline border. :focus-visible only, so pointer users don't get a ring
   on click but keyboard users always do. Never remove this without a
   replacement that is at least as visible.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--avo-primary);
  outline-offset: 3px;
}

/* ==========================================================================
   Reduced motion — see BRANDING.md §5b.
   Every avocloud property ships this. Motion is decoration here; nothing in
   the brand system carries meaning that only exists while something moves,
   so it is always safe to remove it entirely.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}