/* ============================================================
 * Cloudico — core stylesheet
 *
 * Phase 1: design tokens + minimal global resets only.
 * Phase 3 appends the full production styling extracted from
 * the 13 source HTML pages.
 *
 * Tokens are kept in :root so blocks and inline styles can
 * read them via var(--token-name). Token names match the
 * existing Cloudico v4 design system exactly.
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  /* Ink scale ------------------------------------------------- */
  --ink-1: #06060A;
  --ink-2: #0B0B12;
  --ink-3: #13131C;
  --ink-4: #1B1B28;
  --ink-5: #252535;

  /* Section moods ------------------------------------------- */
  --mood-deep:   #06060A;
  --mood-warm:   #110E18;
  --mood-violet: #100A1F;
  --mood-band:   #1A1230;

  /* Lines --------------------------------------------------- */
  --line:    rgba(255,255,255,0.08);
  --line-2:  rgba(255,255,255,0.14);
  --line-3:  rgba(255,255,255,0.22);
  --line-p:  rgba(180,158,255,0.28);

  /* Text ---------------------------------------------------- */
  --t1: #FFFFFF;
  --t2: #D4D4E0;
  --t3: #9B9BAE;
  --t-mono: #B0B0C8;

  /* Purple -------------------------------------------------- */
  --p:        #7649D6;
  --p-light:  #9472E8;
  --p-bright: #B49EFF;
  --p-deep:   #4F2B9C;
  --p-glow:   rgba(118,73,214,0.5);
  --p-soft:   rgba(118,73,214,0.10);
  --p-faint:  rgba(118,73,214,0.05);

  /* Accents ------------------------------------------------- */
  --orange:        #FF7A45;
  --orange-bright: #FFA17A;
  --orange-soft:   rgba(255,122,69,0.10);
  --cyan:          #06B6D4;
  --cyan-bright:   #38DDF7;
  --cyan-soft:     rgba(6,182,212,0.10);
  --emerald:       #10B981;
  --emerald-bright:#4ADE9A;
  --emerald-soft:  rgba(16,185,129,0.10);
  --pink:          #EC4899;
  --pink-soft:     rgba(236,72,153,0.08);
  --rose:          #F43F5E;

  /* Blog theme overrides (when body.blog-page) -------------- */
  --blog-base: #14111C;
  --blog-card: #221C30;
  --blog-text: #F4EFFC;

  /* Fonts --------------------------------------------------- */
  --f-sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Layout -------------------------------------------------- */
  --maxw: 1300px;
  --pad:  clamp(20px, 4vw, 48px);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-2);
  color: var(--t1);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.blog-page {
  background: var(--blog-base);
  color: var(--blog-text);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--p-bright); }

img, svg { display: block; max-width: 100%; height: auto; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Skip link (accessibility) */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.skip-link.screen-reader-text:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  height: auto;
  width: auto;
  padding: 12px 18px;
  background: var(--p);
  color: #fff;
  z-index: 9999;
  outline: 2px solid var(--p-bright);
}

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