/* ==========================================================================
   The Ideal Card — 2026-11 design system: tokens + base
   Ported from the Ideal Brands handoff prototype (The-Ideal-Card-Prototype/
   index.html + css/responsive.css), keeping only the rules the ported markup
   uses. Everything is namespaced — classes .tc-*, ids #tc-*, variables
   --tc-*, keyframes tc-* — so it cannot collide with css/style.css or
   css/futuristic.css, which still style the rest of the site.
   Loaded on every public page. .tc-page is the body class of pages fully on
   the new design; .tc-root marks each new-design component block.
   ========================================================================== */

/* ==========================================================
       Ideal.Bio — Fusion home
       Senthora calm + Flowty poster + FacilPay 3D + Superconscious airy
       ========================================================== */

:root,
[data-theme="dark"] {
  --tc-canvas: #0b0c0f;
  --tc-canvas-2: #14161b;
  --tc-canvas-3: #1b1d24;
  --tc-card: #14161b;
  --tc-line: rgba(242, 242, 238, 0.09);
  --tc-line-2: rgba(242, 242, 238, 0.18);
  --tc-ink: #f2f2ee;
  --tc-ink-2: rgba(242, 242, 238, 0.72);
  --tc-ink-3: rgba(242, 242, 238, 0.48);
  --tc-ink-4: rgba(242, 242, 238, 0.24);
  --tc-accent: #8b6de8;
  --tc-accent-2: #6744da;
  --tc-accent-deep: #3717a0;
  --tc-pop: #c7ff3b;
  --tc-warm: #f4a261;
  --tc-shadow-elev: 0 30px 60px -30px rgba(0, 0, 0, 0.75), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  --tc-shadow-card: 0 24px 50px -20px rgba(139, 109, 232, 0.35);
}
[data-theme="light"] {
  --tc-canvas: #f7f6f2;
  --tc-canvas-2: #eeede7;
  --tc-canvas-3: #e4e2d9;
  --tc-card: #ffffff;
  --tc-line: rgba(14, 16, 19, 0.09);
  --tc-line-2: rgba(14, 16, 19, 0.16);
  --tc-ink: #0e1013;
  --tc-ink-2: rgba(14, 16, 19, 0.68);
  --tc-ink-3: rgba(14, 16, 19, 0.44);
  --tc-ink-4: rgba(14, 16, 19, 0.22);
  --tc-accent: #6744da;
  --tc-accent-2: #5333c0;
  --tc-accent-deep: #3717a0;
  --tc-pop: #c7ff3b;
  --tc-warm: #f4a261;
  --tc-shadow-elev: 0 30px 60px -30px rgba(14, 16, 19, 0.28), 0 8px 20px -10px rgba(14, 16, 19, 0.1);
  --tc-shadow-card: 0 24px 50px -20px rgba(103, 68, 218, 0.3);
}

:root {
  --tc-font-display: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --tc-font-body: "Inter", system-ui, sans-serif;
  --tc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --tc-font-serif: "Instrument Serif", Georgia, serif;
}
:where(.tc-root) *,
:where(.tc-root) *::before,
:where(.tc-root) *::after {
  box-sizing: border-box;
}
.tc-page {
  scroll-behavior: smooth;
}
.tc-page {
  background: var(--tc-canvas);
  color: var(--tc-ink);
  transition:
    background 320ms ease,
    color 320ms ease;
  overflow-x: clip;
}
.tc-page {
  margin: 0;
  font-family: var(--tc-font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
:where(.tc-root) a {
  color: inherit;
  text-decoration: none;
}
:where(.tc-root) button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
:where(.tc-root) img {
  max-width: 100%;
  display: block;
}
.tc-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--tc-font-display);
  font-weight: 500;
  font-size: 15px;
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
    background 200ms,
    color 200ms,
    border-color 200ms,
    box-shadow 200ms;
  white-space: nowrap;
}
.tc-btn-pop {
  background: var(--tc-pop);
  color: #0b0c0f;
  box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--tc-pop) 70%, transparent);
}
.tc-btn-pop:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--tc-pop) 80%, transparent);
}
.tc-btn-ghost {
  color: var(--tc-ink);
  border: 1px solid var(--tc-line-2);
}
.tc-btn-ghost:hover {
  border-color: var(--tc-ink);
}

/* ==========================================================
       Animation runtime (Framer-motion-adjacent)
       ========================================================== */
:root {
  --tc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --tc-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --tc-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tc-dur-slow: 1400ms;
  --tc-dur-med: 1000ms;
  --tc-dur-fast: 640ms;
}

/* ==========================================================
       ECOMMERCE COMPONENTS
       ========================================================== */
.tc-page {
  padding-top: 0;
}
@media (max-width: 900px) {
  .tc-page {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ==========================================================
       MOBILE NAV — hamburger + overlay
       ========================================================== */

:where(.tc-root) [class*="italic"] {
  font-style: normal !important;
}

/* ==========================================================
   Responsive pass (shared across The Ideal Brands sites)
   Hero type scale + nav collapse + phone content containment
   ========================================================== */
[data-theme="light"] :where(.tc-root) span:not([class]) {
  color: #2c1773 !important;
}

/* Component typography root. The prototype set these on <body>; here they
   sit on each .tc-root block (nav, mobile menu, hero) so the new components
   render identically on pages whose body is still styled by css/style.css. */
.tc-root {
  font-family: var(--tc-font-body);
  color: var(--tc-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* css/futuristic.css forces `h1, h2, h3 { font-family: var(--font-display)
   !important }` (Cabinet Grotesk) site-wide; only an !important rule can hand
   the new components' headings back to the design's display face. */
:where(.tc-root) :is(h1, h2, h3) {
  font-family: var(--tc-font-display) !important;
}

/* The prototype runs on browser defaults for block margins, list styles,
   heading sizes and inline SVG. Two resets on this site strip those:
   css/style.css (`* { margin: 0; padding: 0 }`) and Tailwind's preflight in
   the Vite bundle (h1-h6 font-size/weight inherit, margin 0, list-style none,
   svg display block). `revert` hands each property back to the user-agent
   value the prototype was built against. Specificity is a single class, so
   any prototype rule (loaded after this file) still wins on a tie. Images are
   left alone: the prototype resets those itself (img { display: block }). */
.tc-root :where(h1, h2, h3, h4, h5, h6) {
  font-size: revert;
  font-weight: revert;
}
.tc-root :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, pre, ul, ol, menu, fieldset, hr) {
  margin: revert;
}
.tc-root :where(ul, ol, menu) {
  list-style: revert;
  padding: revert;
}
.tc-root :where(svg, video, canvas, iframe, embed, object) {
  display: revert;
  vertical-align: revert;
}

/* Pages fully on the new design (body.tc-page) drop the old theme's ambient
   effects: the film-grain overlay on body::before (css/style.css) and the
   blurred floating orbs js/app.js injects into every page. The design has its
   own backdrop (starfield, glow orbs) and neither layer exists in it. */
body.tc-page::before {
  content: none;
}
body.tc-page > .orb-canvas {
  display: none;
}