/* =====================================================================
   inbox.css — "SLATE" recolor skin for the FullStack site
   Reuses ALL layout/spacing/typography/icons from styles.css and only
   swaps the color combination to Slate's warm-paper + deep-teal palette
   (with a matching dark mode). Content, Montserrat font, and 3D icons
   are unchanged.
   ===================================================================== */

@import url("styles.css");

/* ===================== SLATE — LIGHT ===================== */
:root {
  /* page / surface tints (was the 5 pastels) */
  --color-blush: #efede7;     /* warm paper-2 */
  --color-ivory: #f6f5f1;     /* paper — base page bg */
  --color-mint: #e3efe9;      /* teal-tinted soft */
  --color-lavender: #eceeea;  /* cool paper */
  --color-pink: #f1eee9;      /* warm paper */

  /* ink + surfaces */
  --color-dark: #1a1c1a;      /* headings / ink */
  --color-text: #454a47;      /* body */
  --color-muted: #7b817d;     /* muted */
  --color-white: #fffefb;     /* cards */

  /* accents → a calm teal family (was rose/mint/lav/pink/gold) */
  --accent-rose: #1f5e57;
  --accent-mint: #2f8a78;
  --accent-lavender: #1f5e57;
  --accent-pink: #3a6f68;
  --accent-gold: #277a6b;

  --rose-700: #184a44;
  --lav-700: #1f5e57;
  --pink-700: #1f5e57;
  --mint-700: #1f7a5f;

  /* helper tokens used by the recolor overrides */
  --accent: #1f5e57;
  --accent-h: #184a44;
  --accent-soft: #cfe1dd;
  --on-accent: #ffffff;

  /* semantic */
  --color-success: #1f7a5f;
  --color-success-bg: var(--color-mint);
  --color-error: #d24a3b;
  --color-error-bg: #fbeae7;

  /* lines / focus / shadows */
  --ink: #15211e;                 /* footer, code card, skip link */
  --nav-bg: rgba(246, 245, 241, 0.98);
  --hairline: #dfddd5;
  --ring: rgba(31, 94, 87, 0.3);
  --glass: rgba(255, 255, 255, 0.65);
  --shadow-glow: 0 30px 60px -18px rgba(31, 94, 87, 0.42);
  --shadow-lav: 0 16px 34px rgba(31, 94, 87, 0.26);

  /* brand gradients → teal */
  --gradient-brand: linear-gradient(135deg, #1f5e57, #2f8a78);
  --gradient-warm: linear-gradient(120deg, #1f5e57, #2f8a78, #3a6f68, #277a6b);
}

/* ---- recolor hardcoded component colors (token-aware) ---- */

/* pastel icon boxes → teal-soft tiles */
.ic-box-rose,
.ic-box-mint,
.ic-box-lav,
.ic-box-pink,
.ic-box-gold {
  background: linear-gradient(145deg, var(--accent-soft), var(--color-white));
  color: var(--accent);
}

/* hero avatar stack → teal shades */
.avatar-stack span:nth-child(1) { background: linear-gradient(135deg, #2f8a78, #1f5e57); }
.avatar-stack span:nth-child(2) { background: linear-gradient(135deg, #3c8a80, #1f5e57); }
.avatar-stack span:nth-child(3) { background: linear-gradient(135deg, #4aa492, #247e6e); }
.avatar-stack span:nth-child(4) { background: linear-gradient(135deg, #2f8a78, #184a44); }
.avatar-stack span:nth-child(5) { background: linear-gradient(135deg, #57b2a2, #1f5e57); }

/* hero glass card icon */
.glass-card .gc-ico { background: linear-gradient(135deg, var(--accent-soft), var(--color-mint)); color: var(--accent); }

/* team avatars */
.av-lav, .av-rose, .av-mint, .av-pink, .av-gold {
  background: radial-gradient(circle at 32% 28%, var(--color-white), var(--accent-soft) 78%);
  color: var(--accent);
}

/* project card tops → teal-soft gradients */
.tone-blush, .tone-lav, .tone-mint, .tone-pink, .tone-gold {
  background: linear-gradient(135deg, var(--accent-soft), var(--color-mint));
}

/* about orb */
.about-orb { background: radial-gradient(circle at 30% 28%, var(--color-white), var(--accent-soft) 72%, #bcd6d0); }
.about-orb::before { border-color: var(--accent-soft); }

/* hero dotted grid → teal dots */
.hero::before { background-image: radial-gradient(rgba(31, 94, 87, 0.12) 1px, transparent 1.4px); }

/* primary button hover glow → teal */
.btn-primary:hover { box-shadow: 0 24px 46px rgba(31, 94, 87, 0.35); }

/* header glass → paper */
.site-header { background: rgba(246, 245, 241, 0.72); }
.site-header.scrolled { background: rgba(246, 245, 241, 0.9); }

/* neutralize the old lavender/gold tints on borders */
.pill-tag,
.eyebrow,
.badge-row li,
.service-card,
.btn-ghost,
.pill-ivory { border-color: var(--hairline); }

/* stats band → the Slate teal "signature" block (was dark navy) */
.stats-band { background: var(--accent); }
.stats-band::before,
.stats-band::after { display: none; }
.stat-num {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--on-accent);
  color: var(--on-accent);
}
.stat-label { color: rgba(255, 255, 255, 0.82); }
.stat + .stat::before { background: rgba(255, 255, 255, 0.22); }

/* ===================== SLATE — DARK ===================== */
[data-theme="dark"] {
  --color-blush: #141a18;
  --color-ivory: #0e1311;     /* paper dark — base bg */
  --color-mint: #11302a;      /* teal-soft dark */
  --color-lavender: #141b18;
  --color-pink: #161b19;

  --color-white: #161d1a;     /* card */
  --color-dark: #e9ede9;      /* ink (light) */
  --color-text: #aeb6b1;
  --color-muted: #828b86;

  --accent-rose: #3ecbb1;
  --accent-mint: #56d8c1;
  --accent-lavender: #3ecbb1;
  --accent-pink: #4fd0bb;
  --accent-gold: #56d8c1;

  --rose-700: #56d8c1;
  --lav-700: #3ecbb1;
  --pink-700: #56d8c1;
  --mint-700: #56d8c1;

  --accent: #3ecbb1;
  --accent-h: #56d8c1;
  --accent-soft: #11302a;
  --on-accent: #04201b;

  --color-success: #5fe0a6;
  --color-error: #ff7a6b;
  --color-error-bg: rgba(255, 122, 107, 0.14);

  --ink: #0a0f0d;
  --nav-bg: rgba(14, 19, 17, 0.98);
  --hairline: #27302c;
  --ring: rgba(62, 203, 177, 0.3);
  --shadow-glow: 0 30px 64px -18px rgba(62, 203, 177, 0.4);
  --shadow-lav: 0 16px 34px rgba(0, 0, 0, 0.5);

  --gradient-brand: linear-gradient(135deg, #3ecbb1, #56d8c1);
  --gradient-warm: linear-gradient(120deg, #3ecbb1, #56d8c1, #3ecbb1);
}

/* dark chrome → teal-green glass */
[data-theme="dark"] .site-header { background: rgba(14, 19, 17, 0.72); }
[data-theme="dark"] .site-header.scrolled { background: rgba(14, 19, 17, 0.9); }
[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(62, 203, 177, 0.12) 1px, transparent 1.4px); }
[data-theme="dark"] .about-orb { background: radial-gradient(circle at 30% 28%, var(--color-white), var(--accent-soft) 75%); }

/* footer brand accent word + dark selection */
[data-theme="dark"] .brand-light .brand-name span { color: #56d8c1; }
.brand-light .brand-name span { color: #2f8a78; }
[data-theme="dark"] ::selection { background: var(--accent); color: var(--on-accent); }

/* stat numbers stay readable on the teal block in both themes */
[data-theme="dark"] .stat-num { -webkit-text-fill-color: var(--on-accent); color: var(--on-accent); }
[data-theme="dark"] .stat-label { color: rgba(4, 32, 27, 0.78); }
[data-theme="dark"] .stat + .stat::before { background: rgba(4, 32, 27, 0.25); }

/* hide default <ol> markers on the process timeline (keep only the circle numbers) */
.timeline { list-style: none; padding: 0; }

/* move the floating database chip to mid-left so it doesn't overlap the "250+" badge */
.chip-db { top: 38%; bottom: auto; left: -3%; }

/* varied, coordinated colors for the tech pills (deep hues that pair with #1a1c1a) */
.pill-list .pill {
  background: hsl(var(--h, 172) 32% 92%);
  color: hsl(var(--h, 172) 46% 27%);
  border-color: hsl(var(--h, 172) 28% 84%);
  font-weight: 600;
}
.pill-list .pill:nth-child(7n + 1) { --h: 172; }  /* teal   */
.pill-list .pill:nth-child(7n + 2) { --h: 140; }  /* green  */
.pill-list .pill:nth-child(7n + 3) { --h: 205; }  /* blue   */
.pill-list .pill:nth-child(7n + 4) { --h: 248; }  /* indigo */
.pill-list .pill:nth-child(7n + 5) { --h: 284; }  /* violet */
.pill-list .pill:nth-child(7n + 6) { --h: 38;  }  /* amber  */
.pill-list .pill:nth-child(7n + 7) { --h: 344; }  /* rose   */
.pill-list .pill:hover { background: hsl(var(--h, 172) 36% 88%); }

[data-theme="dark"] .pill-list .pill {
  background: hsl(var(--h, 172) 26% 16%);
  color: hsl(var(--h, 172) 60% 78%);
  border-color: hsl(var(--h, 172) 24% 26%);
}
[data-theme="dark"] .pill-list .pill:hover { background: hsl(var(--h, 172) 28% 20%); }