/*
  Lumen Tool Studio - Design System v0.1 (2026-08-25)
  Canonical tokens. The Studio, the public pages, and later the tool frame pull from these.
  Reference: nanostudiopro.com. Ground is warm-black by default; a cool blue-black
  alternative is kept for comparison via [data-ground="blue"].

  Fonts live in /shared/fonts.css and are served from our own server, not from
  Google. Load that file before this one.
*/

@import url("/shared/select-control.lt-6ea5e903772f877e.css");

:root{
  /* --- ground & surfaces (CANONICAL: cool slate near-black) --- */
  --bg:#15171A;              /* page ground - flat, no blobs/gradients */
  --surface:#1B1E22;         /* raised panel */
  --surface-2:#212429;       /* card / hover */
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.15);

  /* --- primary accent: muted warm gold --- */
  --gold:#C2A46A;
  --gold-deep:#9A8352;       /* hover / pressed */
  --gold-line:rgba(194,164,106,.26);
  --gold-wash:rgba(194,164,106,.12);

  /* --- secondary accent: cool dusty teal (counterpoint to the gold) --- */
  --teal:#6FB0B0;
  --teal-deep:#4E8C8C;
  --teal-line:rgba(111,176,176,.26);
  --teal-wash:rgba(111,176,176,.10);

  /* --- semantic text roles --- */
  --text-strong:#FFFFFF;
  --text-main:#E5E8EC;
  --text-muted:#9BA2AB;
  --text-disabled:#6F767F;
  --text:var(--text-main);
  --text-bright:var(--text-strong);
  --ghost:rgba(255,255,255,.05); /* huge faint serif numerals */

  /* --- scrollbars --- */
  --scrollbar-size:8px;
  --scrollbar-thumb:rgba(229,232,236,.22);
  --scrollbar-thumb-hover:rgba(229,232,236,.34);
  --scrollbar-track:transparent;

  /* --- accent palette (from the tool's own colours) --- */
  --tool-blue:#3B82F6;       /* primary action */
  --tool-green:#3FB27F;      /* save */
  --tool-amber:#E0A83B;      /* project workspace */
  --tool-purple:#8B6CE0;     /* advanced mode */
  /* slightly softened for use as public-page accents on slate */
  --a-blue:#5A9FD4;   --a-blue-wash:rgba(90,159,212,.12);
  --a-green:#57C093;  --a-green-wash:rgba(87,192,147,.12);
  --a-amber:#E0A83B;  --a-amber-wash:rgba(224,168,59,.12);
  --a-purple:#9B82E6; --a-purple-wash:rgba(155,130,230,.12);

  /* --- type --- */
  --font-display:"Cormorant Garamond","Cormorant Garamond Fallback",Georgia,serif;
  --font-ui:"Geist","Geist Fallback",system-ui,-apple-system,sans-serif;
  --serif:var(--font-display);
  --sans:var(--font-ui);

  /* --- radius scale (near-square, matches the tool: 5/6/8) --- */
  --r-sm:5px; --r-md:6px; --r-lg:8px; --r-pill:6px;

  /* --- TYPE SCALE (one system, used everywhere) ---
     size          use                                   font / weight
     --fs-display  hero page titles (.page-title)         serif / 450
     --fs-title    single article / post / category H1    serif / 450
     --fs-h2       section headings                       serif / 500
     --fs-card     card titles                            serif / 500
     --fs-h3       subsection headings                    sans  / 600
     --fs-lead     intro / lede line                      sans  / 450
     --fs-body     body copy                              sans  / 450
     --fs-sm       meta, nav, footer, captions            sans  / 450 (labels 500)
     --fs-xs       eyebrows & uppercase labels            sans  / 500
  */
  --fs-ui-3xs:0.625rem;
  --fs-ui-2xs:0.6875rem;
  --fs-ui-xs:0.75rem;
  --fs-ui-sm:0.8125rem;
  --fs-ui-md:0.875rem;
  --fs-ui-base:0.9375rem;
  --fs-ui-lg:1rem;
  --fs-ui-title:1.25rem;
  --fs-compact-title:1.1875rem;
  --fs-panel-title:1.4375rem;
  --fs-subtitle:1.5rem;
  --fs-brand:1.5625rem;
  --fs-section:1.625rem;
  --fs-small-title:1.6875rem;
  --fs-large-title:2rem;
  --fs-hero-compact:2.125rem;
  --fs-studio-number:2.375rem;
  --fs-hero-mobile:2.625rem;
  --fs-welcome-display:3.875rem;
  --fs-studio-display:4.25rem;
  --fs-404-mobile:4.5rem;
  --fs-404:6rem;
  --fs-display:3.5rem;
  --fs-title:2.5rem;
  --fs-h2:1.75rem;
  --fs-card:1.375rem;
  --fs-h3:1.0625rem;
  --fs-lead:1.125rem;
  --fs-body:1rem;
  --fs-sm:0.875rem;
  --fs-xs:0.75rem;

  /* line-heights */
  --lh-tight:1.08; --lh-snug:1.2; --lh-body:1.72;

  /* ONE reading width for every page. Headings and body copy both use it, so
     a title and the text under it always start on the same left edge. Never
     centre a text column inside a wider one - that is what made pages look
     like they had different widths. */
  --measure:760px;

  /* weights */
  --w-normal:450; --w-medium:500; --w-semibold:600; --w-bold:700;
  --w-body:var(--w-normal); --w-med:var(--w-medium); --w-semi:var(--w-semibold);
  /* Cormorant is a delicate serif - display sizes need real weight behind
     them or the page reads soft and washed out. */
  --w-display:var(--w-semibold);
}

html{font-size:100%}
body{font-weight:var(--w-normal)}
button,input,textarea,select{font-family:inherit;font-weight:inherit}
::placeholder{color:var(--text-muted);opacity:1}

html{
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
*{
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar{
  width:var(--scrollbar-size);
  height:var(--scrollbar-size);
}
*::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border:2px solid transparent;
  border-radius:999px;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background-color:var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner{
  background:transparent;
}

/* alternate cool blue-black ground (comparison only) */
:root[data-ground="blue"]{
  --bg:#0F1219; --surface:#151922; --surface-2:#1C212C;
  --text:#D6D9DF; --text-bright:#F1F3F6; --text-muted:#8B909B;
}