/*
 * Unic CD redesign - shared foundation stylesheet.
 * Spec: _bmad-output/planning-artifacts/ux-designs/ux-unicaao-application-2026-08-05/DESIGN.md
 *
 * Backs the handful of patterns that don't map cleanly onto ad-hoc Tailwind
 * utility classes: the self-hosted brand fonts, the skip-link, the global
 * focus-ring (incl. its required outline-offset on solid-fill components),
 * the section-divider hairline, the reduced-motion-aware hover lift, and the
 * hero scrim/text-band tokens.
 * Color/radius/spacing Tailwind utilities live in tailwind-setup.js
 * (`cd-*` keys) - this file is for the parts Tailwind utilities can't express.
 *
 * Include on every redesigned page, after tailwind-setup.js:
 *   <link rel="stylesheet" href="/cd-tokens.css">
 */

/* ---------- Brand fonts, self-hosted (Unic Brand Agent `get_fonts`) ----------
   Both faces are SIL Open Font License 1.1 - self-hosting is permitted, the
   licence texts sit next to the files in /fonts/. Sourced as TTF from the
   Brand Agent, converted to woff2 and subset to Latin + Latin-Ext + the
   punctuation/arrow range the UI actually uses (~18 KB per sans weight,
   ~31 KB for the serif). This replaces the two Google Fonts connections
   every page used to open on first paint.

   Libre Franklin carries EVERYTHING - body, UI, h2-h6, card titles, labels,
   buttons, badges. Noto Serif is the h1 font and nothing else; at label size
   a serif reads as a rendering bug, not as brand. The Brand Agent ships the
   serif in SemiBold/Bold only, and prescribes SemiBold 600 for the h1.      */
@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/LibreFranklin-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/LibreFranklin-Italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/LibreFranklin-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/LibreFranklin-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('/fonts/LibreFranklin-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Noto Serif';
    src: url('/fonts/NotoSerif-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Noto Serif';
    src: url('/fonts/NotoSerif-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    --cd-focus-ring: #0d0d0d;
    --cd-field-bg: #ffffff;
    --cd-field-fg: #0d0d0d;
    --cd-field-placeholder: #595959;
    --cd-section-divider: #808080;
    --cd-hero-text-band-color: #ffffff;
    --cd-hero-text-band-opacity: 0.72;
    --cd-reverse-bg: #262626;
    --cd-reverse-fg: #f2f2f2;
    --cd-reverse-muted: #a6a6a6;
    --cd-reverse-divider: #808080;
}
.dark {
    --cd-focus-ring: #f2f2f2;
    --cd-field-bg: #1a1a1a;
    --cd-field-fg: #f2f2f2;
    --cd-field-placeholder: #a6a6a6;
    --cd-section-divider: #a6a6a6;
    --cd-hero-text-band-color: #0d0d0d;
    --cd-reverse-bg: #cccccc;
    --cd-reverse-fg: #0d0d0d;
    /* #404040, not #595959. The muted tone sits on the reverse band
       (#cccccc here), where #595959 measures 4.36:1 and misses WCAG AA by a
       hair; #404040 measures 6.46:1. The light-theme counterpart (#a6a6a6 on
       #262626) is fine at 6.22:1. Found by the Unic Brand Agent's contrast
       check - it flags the pair against the page surface, which is the wrong
       ground here, but the real ground failed too. */
    --cd-reverse-muted: #404040;
    --cd-reverse-divider: #a6a6a6;
}

/* ---------- Skip link (WCAG 2.4.1 Bypass Blocks) ----------
   First focusable element on every page, before the nav. Markup:
   <a href="#main" class="cd-skip-link" data-i18n="nav.skipToContent">Skip to main content</a>
   ...
   <main id="main"> ... </main>                                            */
.cd-skip-link {
    position: absolute;
    top: -1000px;
    left: 0;
    z-index: 100;
    background: var(--cd-focus-ring);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 0 0 5px 0;
}
.dark .cd-skip-link { color: #0d0d0d; }
.cd-skip-link:focus {
    top: 0;
}

/* ---------- Form controls ----------
   A field with no background utility renders the user-agent default, which is
   white and does NOT follow the `dark` class - while its text colour is
   inherited from the page, i.e. near-white in dark mode. That is white on
   white: what you type is invisible. 38 inputs, textareas and selects across
   15 pages were in that state, the chat composers among them.
   An element selector (0,0,1) loses to any Tailwind utility (0,1,0), so an
   explicit `bg-transparent` or `bg-cd-*` on the element still wins.         */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea,
select {
    background-color: var(--cd-field-bg);
    color: var(--cd-field-fg);
}
input::placeholder,
textarea::placeholder {
    color: var(--cd-field-placeholder);
    opacity: 1;                    /* Firefox dims placeholders by default */
}

/* ---------- Global focus ring (DESIGN.md.Components - focus ring) ----------
   Near-black/white, 2px, with a 3px outline-offset so it never collides with
   a same-tone solid-fill component (the primary button, most notably).
   Never a decorative accent colour - see DESIGN.md.Do's and Don'ts.        */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--cd-focus-ring);
    outline-offset: 3px;
}

/* ---------- Section-divider hairline (DESIGN.md.Layout & Spacing) ----------
   Use on every section boundary in the alternating light/subtle rhythm -
   clears the 3:1 UI-boundary contrast threshold in both themes, unlike the
   general-purpose `border-soft` token used for purely decorative dividers. */
.cd-section-divider {
    border-top: 1px solid var(--cd-section-divider);
}

/* ---------- Reduced-motion-aware hover lift (EXPERIENCE.md.Interaction Primitives) ----------
   Apply to any interactive card/tile that lifts on hover. Under
   prefers-reduced-motion, only the colour/border change (defined per
   component) remains - the transform is dropped entirely.                 */
.cd-hover-lift {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .cd-hover-lift:hover { transform: translateY(-3px); }
}

/* ---------- Hero text-band (DESIGN.md.Elevation & Depth) ----------
   Fixed, more opaque scrim band sized to the headline's bounding area,
   sitting *underneath* the text, on top of the theme-relative gradient
   overlay used purely for atmosphere. Load-bearing in light mode; kept in
   dark mode for consistency. Markup: a block positioned over the lower
   ~62% of the hero, e.g.:
   <div class="cd-hero-text-band" style="height:62%"></div>                 */
.cd-hero-text-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cd-hero-text-band-color);
    opacity: var(--cd-hero-text-band-opacity);
    pointer-events: none;
}

/* ---------- Reverse band (bold alternating section rhythm) ----------
   Landing-page-only deviation from DESIGN.md's default/subtle section
   pairing, approved 2026-08-17: swaps to the OPPOSITE theme's
   surface/text pair for a much bolder alternation (closer to
   unic.com's own bold section blocks) instead of the subtle
   default/subtle shift. Still theme-relative - swaps roles with the
   toggle, never hard-locked to one theme - just a bigger jump between
   the two roles. Child elements needing the muted variant opt in via
   `.cd-text-reverse-muted`; everything else inherits `color`.        */
.cd-band-reverse {
    background-color: var(--cd-reverse-bg);
    color: var(--cd-reverse-fg);
}
.cd-band-reverse.cd-section-divider {
    border-top-color: var(--cd-reverse-divider);
}
.cd-text-reverse-muted {
    color: var(--cd-reverse-muted);
}

/* ============================================================
   LINE B - "Werkbank": the working surfaces
   ============================================================
   The concept sets two design lines on one foundation.

   Line A ("Bühne") is for the pages people meet rarely and often for the
   first time: the landing and the three initiative pages. Bold alternation
   via `.cd-band-reverse`, a photo in the hero, display-size serif, 128px
   between sections.

   Line B is for the pages people WORK with - the work directory, the
   registry, questions, tools, the story builder, the back-office. Someone
   checking the registry for the fourth time wants the table, not 128px of
   whitespace.

   What the two lines SHARE, so the switch never reads as a jump to a
   different website: tokens, both fonts, the logo, the header, radius 5px,
   the focus ring, the initiative accents, and the light/dark behaviour.

   What Line B changes:
     - rhythm     56px between sections instead of 128px (40 on mobile)
     - contrast   default/subtle alternation only. `.cd-band-reverse` is a
                  Line A device and must not appear on a Line B page.
     - headings   the h1 stays Noto Serif - that is the brand signal both
                  lines carry - but at working size, not display size.
                  h2 and below are Libre Franklin, as everywhere.
     - density    cards and paddings one step tighter.

   Usage: put `cd-line-b` on <body>, then use the `cd-b-*` classes. The
   marker class is what lets a page be checked for line consistency.       */

.cd-line-b .cd-b-section {
    padding-top: 40px;
    padding-bottom: 40px;
}
@media (min-width: 768px) {
    .cd-line-b .cd-b-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* Working-size serif h1: still the brand face, roughly a third of the
   display size Line A uses. Never below 1.25rem - a serif at label size
   reads as a rendering bug (Unic Brand Agent). */
.cd-line-b .cd-b-h1 {
    font-family: var(--cd-font-heading, 'Noto Serif', Georgia, 'Times New Roman', Times, serif);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.6vw, 2.375rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.cd-line-b .cd-b-h2 {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.cd-line-b .cd-b-lead {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 66ch;
}

/* A Line B page never carries the bold reverse band. If one slips in via a
   shared fragment, fall back to the subtle surface rather than flipping the
   whole section to the opposite theme. */
.cd-line-b .cd-band-reverse {
    background-color: var(--cd-b-subtle-bg, #f2f2f2);
    color: inherit;
}
.dark .cd-line-b .cd-band-reverse,
.cd-line-b.dark .cd-band-reverse {
    background-color: #1a1a1a;
}

/* A link the working directory could not resolve keeps its text but loses its
   destination (initiative-content.js, dropDeadLink). Mark it as prose, not as
   something to click. */
.cd-unresolved-link {
    color: inherit;
    text-decoration: none;
    cursor: default;
    border-bottom: 1px dotted var(--cd-section-divider);
}