/* ============================================================
   CHOREON DESIGN SYSTEM — Colors & Type
   The single source of truth for color + typographic tokens.
   Import this file in any Choreon artifact.
   Font: Poppins (Google Fonts). Theme: dark-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------------------------------------------------------
     1. RAW BRAND PALETTE  (from product SCSS tokens)
     --------------------------------------------------------- */
  --primary:               #54a7d1; /* Choreon blue — the brand */
  --primary-active:        #438bab; /* hover / pressed blue */
  --primary-deep:          #2b556b; /* gradient terminus (icons, glows) */
  --primary-background:    #043d59; /* deep teal-blue fill */

  --secondary:             #1a1a1a;
  --secondary-background:  #161616;

  --accent:                #54a7d1; /* alias of primary */
  --indigo:                #c599ff;
  --indigo-background:     #340077;

  /* Vibrant tech accents — use sparingly for highlights, data viz, eyebrows,
     gradients, hover sparkle. Blue stays primary; these add hue separation. */
  --accent-pulse:          #ff6a00; /* Pulse Orange — energy, from the hero name-gradient */
  --accent-pulse-soft:     #ff8a33; /* lighter orange for text-on-dark */
  --accent-violet:         #c599ff; /* Electric Violet — techy, alias of indigo */
  --accent-violet-soft:    #d9bbff;

  /* Neutrals — the dark UI scale */
  --black:                 #000000;
  --dark:                  #121212; /* app/page background */
  --surface:               #1a1a1a; /* raised surfaces / nav */
  --surface-2:             #161616; /* secondary surface */
  --divider:               #222222; /* hairline borders */
  --divider-strong:        #333333; /* control borders */
  --sub:                   #cccccc; /* secondary text */
  --sub-background:        #333333;
  --placeholder:           #808080; /* muted / disabled text */
  --light:                 #ffffff;

  /* Semantic — status */
  --success:               #66bb6a;
  --success-secondary:     #00b209;
  --success-background:    #003503;
  --info:                  #54a7d1;
  --info-secondary:        #00aaff;
  --info-background:       #002347;
  --warning:               #ffb74d;
  --warning-background:    #2e1c00;
  --danger:                #ff565e;
  --danger-background:     #320b11;
  --error:                 #ff0000;

  /* Channel triplets — the single source for translucent brand colors.
     Use as rgba(var(--primary-rgb), .15) anywhere a brand color needs an alpha,
     instead of re-typing the raw channels. */
  --primary-rgb: 84, 167, 209;   /* var(--primary)        #54a7d1 */
  --violet-rgb:  197, 153, 255;  /* var(--accent-violet)  #c599ff */
  --pulse-rgb:   255, 106, 0;    /* var(--accent-pulse)   #ff6a00 */
  --light-rgb:   255, 255, 255;  /* var(--light)          #ffffff */
  --black-rgb:   0, 0, 0;         /* var(--black)          #000000 */
  --success-rgb: 102, 187, 106;  /* var(--success)        #66bb6a */
  --glow-rgb:    0, 87, 131;     /* signature blue spotlight (see --shadow-glow) */

  /* ---------------------------------------------------------
     2. SEMANTIC COLOR ROLES  (use these in components)
     --------------------------------------------------------- */
  --bg:                    var(--dark);     /* page background */
  --bg-raised:             var(--surface);  /* cards, nav, header */
  --bg-sunken:             var(--secondary-background);
  --fg1:                   var(--light);    /* primary text */
  --fg2:                   var(--sub);      /* secondary text / body */
  --fg3:                   var(--placeholder); /* muted / hints */
  --border:                var(--divider);  /* hairline */
  --border-strong:         var(--divider-strong);
  --link:                  var(--primary);

  /* Brand gradient — used on icons, name accents, glows */
  --brand-gradient: linear-gradient(180deg, #54a7d1 0%, #2b556b 100%);
  --brand-gradient-radial: radial-gradient(100.64% 138.68% at 30.51% 3.7%, #54a7d1 29.14%, #ff7a00 100%);
  /* Tri-stop focus gradient (blue → violet → orange). Used by .grad text utility
     and pricing's gradient button + "Most popular" pill (var(--grad)). */
  --grad: linear-gradient(100deg, #54a7d1 0%, #c599ff 48%, #ff6a00 105%);
  /* card surface — subtle blue-tinted glass used across product */
  --card-fill: linear-gradient(143.09deg, rgba(91,158,190,0.15) 61.28%, rgba(42,73,88,0.15) 90.03%);
  --card-border-grad: linear-gradient(150deg, rgba(91,158,190,0.8) 0%, rgba(42,73,88,0) 100%);

  /* ---------------------------------------------------------
     3. TYPOGRAPHY
     --------------------------------------------------------- */
  --font-sans: 'Poppins', -apple-system, system-ui, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --font-code: 'Courier New', Courier, monospace;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Global metrics — Choreon runs tight */
  --tracking: -0.02em;  /* -2% letter-spacing everywhere */
  --leading:  1.25;     /* 125% line-height */

  /* Type scale (px) */
  --fs-12: 12px;
  --fs-14: 14px;  /* UI base */
  --fs-16: 16px;  /* body base */
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-42: 42px;  /* section title */
  --fs-48: 48px;
  --fs-60: 60px;  /* hero / display */
  --fs-72: 72px;

  /* ---------------------------------------------------------
     4. SPACING  (4px base grid)
     --------------------------------------------------------- */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;
  --space-72: 72px; --space-80: 80px; --space-100: 100px; --space-120: 120px;
  --space-140: 140px; --space-160: 160px;

  /* Section rhythm (desktop): 120px between sections, 80px subsections */
  --section-gap:    120px;
  --subsection-gap: 80px;

  /* Shared content width for header, footer, marketing sections and the
     docs/blog grid, so every page's edges line up with the chrome. Sized so
     the three-column docs/blog layout still leaves a readable centre column. */
  --wrap-max: 1200px;

  /* ---------------------------------------------------------
     5. RADII / BORDERS / ELEVATION
     --------------------------------------------------------- */
  --radius:    8px;   /* the canonical radius — buttons, cards, inputs */
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--divider);
  --border-control:  1px solid var(--divider-strong);

  --shadow-header: 0 3px 8px rgba(0,0,0,0.24);
  --shadow-glow:   0 0 202px rgba(var(--glow-rgb),0.5); /* the signature blue spotlight */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply on a wrapper (e.g. <body> or .choreon) to inherit the
   Choreon look. All text is tight-tracked Poppins on near-black.
   ============================================================ */
.choreon,
body.choreon {
  background-color: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  font-size: var(--fs-16);
  -webkit-font-smoothing: antialiased;
}

.choreon h1, .choreon .h1 {
  font-size: var(--fs-60);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: var(--tracking);
}
.choreon h2, .choreon .h2 {
  font-size: var(--fs-42);
  font-weight: var(--fw-medium);
  line-height: 1.15;
}
.choreon h3, .choreon .h3 {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
}
.choreon h4, .choreon .h4 {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
}
.choreon h5, .choreon .h5 {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
}
.choreon h6, .choreon .h6 {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
}
.choreon p, .choreon .body {
  font-size: var(--fs-16);
  color: var(--fg2);
}
.choreon small, .choreon .caption {
  font-size: var(--fs-14);
  color: var(--fg2);
}

/* The signature "name accent" — a gradient-filled text run */
.choreon .accent-text {
  background: var(--brand-gradient-radial);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Inline code + blocks */
.choreon code {
  background-color: rgba(var(--primary-rgb),0.1);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius);
  font-family: var(--font-code);
  font-size: var(--fs-14);
  color: var(--primary);
}
.choreon pre {
  background-color: var(--dark);
  padding: var(--space-16);
  border-radius: var(--radius);
  border: var(--border-control);
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.choreon pre code {
  background: transparent;
  padding: 0;
  display: block;
  line-height: 1.5;
  color: var(--fg2);
}

/* Link with animated underline (header/footer nav pattern) */
.choreon .link {
  color: var(--fg2);
  text-decoration: none;
  font-size: var(--fs-14);
  position: relative;
}
.choreon .link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  width: 0;
  background-color: var(--primary);
  transition: width 0.15s;
}
.choreon .link:hover::after,
.choreon .link.active::after { width: 100%; }