/* ============================================================================
   Sodiarc design system — shared across the group
   ----------------------------------------------------------------------------
   The same structural grammar as sodiarcjr.ai: hairline borders instead of
   drop shadows, restrained radii, mono micro-labels and tabular numerals,
   one accent used sparingly.

   Each property keeps its own accent, so the sites read as family rather than
   as clones. Set --accent per site; everything else is shared.

   Loaded AFTER the Tailwind CDN so it can retire the effects that make a page
   look like every other landing page: gradient fills, glows, lift-on-hover.
   ========================================================================= */

:root {
  --ink:       #14181d;
  --surface:   #ffffff;
  --raised:    #f7f8f9;
  --hairline:  #e4e6ea;
  --text-mid:  #52565e;
  --text-low:  #868a92;

  /* Sodiarc Academy. sodiarcjr.ai overrides this with its signal blue. */
  --accent:      #ec7611;
  --accent-soft: #fff6ee;
  --accent-line: rgba(236, 118, 17, .28);

  --radius:    4px;
  --radius-sm: 3px;
}

/* --- 1 · Retire the drop shadows -------------------------------------------
   A shadow says "this floats". A hairline says "this is a distinct thing".
   The second is quieter and survives being printed or screenshotted.       */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl,
.hover\:shadow-lg:hover, .hover\:shadow-xl:hover, .hover\:shadow-2xl:hover {
  box-shadow: none !important;
}
.shadow-lg, .shadow-xl, .shadow-2xl { border: 1px solid var(--hairline); }

/* --- 2 · Calm the radii ----------------------------------------------------
   Large radii read as soft and consumer. 3-4px reads as considered.        */
.rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: var(--radius) !important; }
.rounded-lg  { border-radius: var(--radius-sm) !important; }
/* Pills, avatars and toggles keep their shape. */
.rounded-full { border-radius: 9999px !important; }

/* --- 3 · Solid, not gradient ----------------------------------------------- */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent) !important;
}
.gradient-bg { background: var(--ink) !important; }
.gradient-border {
  background: none !important;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 0 !important;
}
.gradient-border-inner { background: transparent !important; border-radius: 0 !important; }

/* --- 4 · No glow, no lift --------------------------------------------------
   Hover should acknowledge the cursor, not animate the layout.            */
.glow { box-shadow: none !important; }
.card-hover { transition: border-color .18s ease, background-color .18s ease !important; }
.card-hover:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--text-low) !important;
}
.animate-float { animation: none !important; }

/* --- 5 · Structural utilities, shared with sodiarcjr.ai ------------------- */
.caps {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-low);
}
.caps-accent { color: var(--accent); }
.num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.rule { height: 1px; background: var(--hairline); border: 0; }
.hairline { border: 1px solid var(--hairline); border-radius: var(--radius); }

/* A small plus mark, used to open a section. Same device as the studio site. */
.tick { display:inline-block; width:11px; height:11px; position:relative; vertical-align:middle; }
.tick::before, .tick::after { content:""; position:absolute; background: var(--accent); }
.tick::before { left:5px; top:0; bottom:0; width:1.5px; }
.tick::after  { top:5px; left:0; right:0; height:1.5px; }

/* --- 6 · Numerals ----------------------------------------------------------
   Stat figures set in mono, so a column of numbers lines up.              */
.stat-figure {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; font-weight: 700;
}

/* --- 7 · Buttons -----------------------------------------------------------
   One solid accent button, one outlined. Nothing else.                    */
.btn-solid {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--radius-sm); transition: opacity .18s ease;
}
.btn-solid:hover { opacity: .9; }
.btn-outline {
  background: transparent; color: var(--ink); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); transition: background-color .18s ease;
}
.btn-outline:hover { background: var(--raised); }

/* ============================================================================
   8 · Retiring the generic layer
   ----------------------------------------------------------------------------
   Pastel gradient cards, rainbow bars, glow blobs and dot-grid hero backgrounds
   carry no information. The hairlines and the type carry the page instead.

   Selectors use [class~="..."], which matches a whole class token. A substring
   match cannot tell from-brand-50 (a pastel tint) from from-brand-500 (a solid
   orange banner), and flattening the second one to a tint hides its white text.
   ========================================================================= */

[class*="bg-gradient-to"] { background-image: none !important; }

/* Dark sections keep their weight. */
[class~="from-dark-900"], [class~="from-dark-800"],
[class~="from-slate-800"], [class~="from-slate-900"], [class~="from-gray-900"] {
  background-color: var(--ink) !important;
}

/* Saturated accent surfaces stay accent: these carry white text. */
[class~="from-brand-500"], [class~="from-brand-600"], [class~="from-brand-900"] {
  background-color: var(--accent) !important;
}
[class~="from-purple-600"], [class~="from-blue-600"], [class~="from-blue-700"] {
  background-color: var(--ink) !important;
}

/* Pastel tinted cards become plain surfaces with a rule around them. */
[class~="from-brand-50"],  [class~="from-brand-100"], [class~="from-orange-50"],
[class~="from-purple-50"], [class~="from-purple-100"],
[class~="from-green-50"],  [class~="from-green-100"], [class~="from-emerald-50"],
[class~="from-blue-50"],   [class~="from-blue-100"],
[class~="from-red-50"],    [class~="from-gray-50"],   [class~="from-white"] {
  background-color: var(--raised) !important;
  border: 1px solid var(--hairline);
}

/* Decorative rainbow bars carried no meaning. Reduce to a hairline. */
[class~="from-blue-300"], [class~="from-indigo-300"], [class~="from-purple-300"],
[class~="from-teal-300"], [class~="from-brand-300"],  [class~="from-blue-200"] {
  background-color: var(--hairline) !important;
}

/* Glow blobs and frosted panels. */
[class*="blur-3xl"], [class*="blur-2xl"], [class*="blur-xl"] { display: none !important; }
[class*="backdrop-blur"] { backdrop-filter: none !important; }

/* Dot-grid hero background. */
.hero-pattern { background-image: none !important; }

hr { border: 0; border-top: 1px solid var(--hairline); }

/* ============================================================================
   9 · Dark scheme
   ----------------------------------------------------------------------------
   Same token names, re-pointed. Nothing else in this file has to know, because
   every rule above reads through var(). Values match sodiarc.ai and
   sodiarcjr.ai so the three sites are the same dark, not three near-misses.

   Applied by a `.dark` class on <html>, set before first paint by theme.js.
   ========================================================================= */
.dark {
  --ink:       #fafafa;
  --surface:   #0b0d10;
  --raised:    #16191d;
  --hairline:  #23262b;
  --text-mid:  #a5a8ae;
  --text-low:  #6a6d73;

  --accent:      #fafafa;
  --accent-soft: #16191d;
  --accent-line: #2f333a;

  color-scheme: dark;
}

/* Dark sections in section 8 flip too: on a dark page an "ink" panel would
   vanish into the background, so it becomes the raised surface instead. */
.dark [class~="from-dark-900"], .dark [class~="from-dark-800"],
.dark [class~="from-slate-800"], .dark [class~="from-slate-900"],
.dark [class~="from-gray-900"] { background-color: var(--raised) !important; }

/* Photographs and the odd screenshot are a touch hot against a dark page. */
.dark img:not([src$=".svg"]) { filter: brightness(.94) contrast(1.02); }