/* motif/families/cura/family.css — the cura voice
 *
 * Cura: "Caring, Warm, Hopeful — Pi's Sibling in Terracotta."
 * Used by the cura sub-family of the pointegrity umbrella
 * (familiar, recital, and future caring/health/wellness apps).
 *
 * Cura is structurally pi: paper-cream surface, Plex Serif
 * display titles, 32px accent rule, bottom-rule inputs, Plex
 * Mono small-caps labels, calm motion vocabulary. The single
 * shift is the primary palette — pi's woodland sage gives way
 * to cura's earthy terracotta. The signal is "warmth + care"
 * vs pi's "personal + quiet"; the silhouette stays pi so apps
 * across the broader pointegrity family read as one company.
 *
 * Loading order:
 *   tokens.css → components.css → utilities.css → responsive.css
 *   → auth.css (and any future motif aspect)
 *   → families/cura/family.css   (overrides everything above)
 *
 * IMPLEMENTATION NOTE: this file is currently a fork of pi's
 * family.css with the `--color-primary-*` scale redefined to
 * terracotta and selectors renamed `[data-family="cura"]`.
 * When a third pointegrity sub-family lands (or maintenance
 * proves painful), refactor by extracting pi/cura shared
 * structure into a sibling file and have both family files
 * compose against it. Until then the duplication is small
 * vs the architectural cost — five-minute palette swap, no
 * shared-base regression risk.
 */

[data-family="cura"] {
    /* ── Core token overrides ───────────────────────────────
     * These propagate everywhere — buttons, cards, inputs,
     * tables, badges. Pi-family apps inherit this typography
     * + surface vocabulary across every motif component.
     *
     * Body type commits to Plex Sans (motif's default already
     * supports it via plex.css; pi just makes it non-optional).
     * Display type — the *headings* — switch to Plex Serif via
     * the auth-title-font aspect token below, NOT here at the
     * core --font-sans level, because not every surface in pi
     * mode wants serif headings (admin tables, sidebars stay
     * sans). The serif commitment is per-surface. */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: var(--motif-font-mono);    /* commit cura to Plex Mono for code/numerics */

    /* Primary palette — terracotta. Replaces motif's sage
       --color-primary-* scale across every component (sign-in
       buttons, links, badges, success glyph, focus rings, etc).
       Hue is warm earthen orange-red — care without being
       institutional, warmth without being saccharine. */
    --color-primary-50:  #fbf2ee;
    --color-primary-100: #f5dccf;
    --color-primary-200: #ebbda6;
    --color-primary-300: #dd9b7e;
    --color-primary-400: #cf7d5a;
    --color-primary-500: #b85c3a;
    --color-primary-600: #9d4824;
    --color-primary-700: #7e371a;
    --color-primary-800: #5e2913;
    --color-primary-900: #3f1c0d;

    /* Surface — slightly peachier cream than pi's #fbf9f4. The
       additional yellow-orange undertone reads "warm room"
       rather than pi's "cool paper." Dark mode would override
       these in a [data-family="cura"][data-theme="dark"] block
       (out of scope for this first pass). */
    --color-bg: #fbf6ef;
    --color-card-bg: #fffbf5;
    --color-fg: var(--color-neutral-900);
    --color-fg-muted: var(--color-neutral-600);

    /* Shadows — the warm paper-soft shadow becomes pi's
       default elevation. Components that use --shadow-md /
       --shadow-lg / --shadow-xl all soften. */
    --shadow-md: var(--motif-shadow-paper-soft);
    --shadow-lg: var(--motif-shadow-paper-soft);
    --shadow-xl: var(--motif-shadow-paper-soft);

    /* ── Auth aspect overrides ──────────────────────────────
     * These touch --auth-* tokens. When future aspects (admin
     * dashboard, marketing) come online they get their own
     * sections in this same file — pi-family voice extends to
     * every aspect from one place. */

    /* Background and card — the page is warm paper, the card
       slightly lighter; depth from tonal contrast plus
       hairline + paper-soft shadow.
       Card runs wider than motif's default 400px so the form
       feels horizontal-breathing rather than column-tall. */
    --auth-bg: #fbf6ef;
    --auth-card-bg: #fffbf5;
    --auth-card-shadow: var(--motif-shadow-paper-soft);
    --auth-card-radius: var(--radius-lg);
    --auth-card-width: 480px;
    --auth-card-padding-y: var(--space-8);
    --auth-card-padding-x: var(--space-10);

    /* Title — Plex Serif at display size, the "one perfect
       detail." Tracking slightly tight; weight medium (500)
       — confident without being heavy. Pi pushes the title
       larger than motif's default display-1 (3.25rem vs
       2.875rem) — makes the serif a real anchor on a wider
       card. */
    --auth-title-font: var(--motif-font-display);
    --auth-title-color: var(--color-neutral-900);
    --auth-title-size: 3.25rem;
    --auth-title-weight: 500;
    --auth-title-tracking: -0.015em;

    --auth-text-color: var(--color-neutral-600);

    /* Primary CTA — solid terracotta-700, no gradient. Same
       restraint as pi (no gradient on a card surface) but the
       hue carries cura's warmer signal. */
    --auth-action-bg: var(--color-primary-700);
    --auth-action-color: #ffffff;
    --auth-action-radius: var(--radius-md);

    /* Inputs — bottom-rule style. Form feels journal-like
       rather than dashboard-like. Focus ring uses terracotta
       rgba (was sage rgba in pi). */
    --auth-input-bottom-only: 1;
    --auth-input-rest-color: var(--color-neutral-300);
    --auth-input-focus-color: var(--color-primary-600);
    --auth-focus-ring: 0 4px 0 -3px rgba(184, 92, 58, 0.18);

    /* Links — terracotta with always-on underline at offset. The
       underline is part of the quiet vocabulary; users see
       interactivity without color-load. */
    --auth-link-color: var(--color-primary-700);
    --auth-link-decoration: underline;
    --auth-link-underline-offset: 0.25em;

    /* Site link sits on warm cream now (not the sage gradient)
       — needs a low-contrast neutral, not white. */
    --auth-site-link-color: var(--color-neutral-500);
    --auth-site-link-hover: var(--color-neutral-800);
}

/* ════════════════════════════════════════════════════════════
 * Selector rules — the small number of CSS rules that token
 * overrides alone can't express. Each is namespaced under
 * [data-family="cura"] so it activates only in cura mode.
 * ════════════════════════════════════════════════════════════ */

/* Paper-grain noise overlay on the auth shell.
   SVG noise filter, ~5% opacity, fixed-position. */
[data-family="cura"] .auth-shell {
    position: relative;
    font-family: var(--font-sans);
}
[data-family="cura"] .auth-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}
[data-family="cura"] .auth-shell > * { position: relative; z-index: 1; }

/* Auth title — Plex Serif at display size. */
[data-family="cura"] .auth-logo h1 {
    font-family: var(--auth-title-font);
    font-size: var(--auth-title-size);
    font-weight: var(--auth-title-weight);
    letter-spacing: var(--auth-title-tracking);
    color: var(--auth-title-color);
    line-height: 1.05;
}

/* Card — split y/x padding + hairline border. */
[data-family="cura"] .auth-card {
    padding: var(--auth-card-padding-y) var(--auth-card-padding-x);
    border: var(--motif-border-hairline);
}

/* The "one perfect detail" — a 32px amber hairline accent
   under the auth title. Logo block tightened across the board
   (--space-6 bottom, --space-3 between title and accent) so
   the wider card stays compact vertically. */
[data-family="cura"] .auth-logo {
    margin-bottom: var(--space-6);
}
[data-family="cura"] .auth-logo::after {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-secondary-500);
    margin: var(--space-3) auto 0;
}

/* Bottom-only input rule. Selecting motif's `.input` plus
   form-group's children covers both auth and admin forms.
   Larger font-size (--text-lg = 18px vs motif's 16px default)
   makes the typing surface more readable on the wider card. */
[data-family="cura"] .form-group .input,
[data-family="cura"] .form-group input,
[data-family="cura"] .form-group select {
    border: 0;
    border-bottom: 1px solid var(--auth-input-rest-color);
    border-radius: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    font-size: var(--text-lg);
    transition: border-color var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}
[data-family="cura"] .form-group .input:focus,
[data-family="cura"] .form-group input:focus,
[data-family="cura"] .form-group select:focus {
    outline: none;
    border-bottom-color: var(--auth-input-focus-color);
    box-shadow: var(--auth-focus-ring);
}

/* Form labels — Plex Mono small-caps. */
[data-family="cura"] .form-label {
    font-family: var(--motif-font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--motif-tracking-small-caps);
    color: var(--color-neutral-500);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-1);
}

/* Compress form-group spacing in cura mode — motif's default
   --space-5 (20px) reads loose on the wider card. */
[data-family="cura"] .form-group {
    margin-bottom: var(--space-4);
}

/* Submit button + single-CTA — restrained, with a 1px lift
   on hover. Replaces the gradient-fill default. Padding +
   font-size pushed up so the button reads as the primary
   target on a wider card. */
[data-family="cura"] .auth-submit,
[data-family="cura"] .auth-action {
    background: var(--auth-action-bg);
    border-radius: var(--auth-action-radius);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    padding: var(--space-4) var(--space-8);
    transition: transform var(--duration-fast) var(--ease-default),
                background-color var(--duration-fast) var(--ease-default);
}
[data-family="cura"] .auth-submit:hover,
[data-family="cura"] .auth-action:hover {
    background: var(--color-primary-800);
    opacity: 1;
    transform: translateY(-1px);
}
[data-family="cura"] .auth-submit:active,
[data-family="cura"] .auth-action:active {
    transform: translateY(0);
}

/* Links — always-on offset underline. */
[data-family="cura"] .auth-links a,
[data-family="cura"] .auth-site-link a {
    text-decoration: var(--auth-link-decoration);
    text-underline-offset: var(--auth-link-underline-offset);
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}
[data-family="cura"] .auth-links a:hover { color: var(--color-primary-900); }

/* Lang switcher — Plex Mono small-caps. */
[data-family="cura"] .lang-switcher {
    font-family: var(--motif-font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--motif-tracking-small-caps);
    color: var(--color-neutral-400);
}
[data-family="cura"] .lang-switcher a { text-decoration: none; }
[data-family="cura"] .lang-switcher a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* Page-enter fade + form-field stagger. */
[data-family="cura"] .auth-card {
    animation: pi-fade-in var(--motif-motion-page-enter) ease-out both;
}
[data-family="cura"] .form-group,
[data-family="cura"] .auth-links,
[data-family="cura"] .lang-switcher {
    animation: pi-rise-in var(--motif-motion-page-enter) ease-out both;
    animation-delay: calc(var(--motif-motion-stagger-step) * var(--pi-stagger-i, 0));
}

@keyframes pi-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pi-rise-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Step marker (used by multi-step flows). Plex Mono, amber. */
[data-family="cura"] .auth-step {
    display: inline-block;
    font-family: var(--motif-font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--motif-tracking-small-caps);
    color: var(--color-secondary-700);
    margin-bottom: var(--space-3);
}

/* Verify-email — sparse layout, large icon, weight-300 glyph. */
[data-family="cura"] .auth-icon {
    font-size: 56px;
    font-weight: 300;
    line-height: 1;
}
[data-family="cura"] .auth-icon.success { color: var(--color-primary-700); }
[data-family="cura"] .auth-icon.error { color: var(--color-danger-600); }

/* ════════════════════════════════════════════════════════════
 * Navbar — pi voice
 * Replace motif's default sage-fill navbar with paper-cream
 * + hairline border. The brand becomes a small Plex Serif tag
 * (echoing the auth-title display use). Nav links use the same
 * always-on offset underline as auth links.
 * ════════════════════════════════════════════════════════════ */

[data-family="cura"] .navbar {
    /* Subtle warm-pink tint over peachy cream — picks up cura's
       family accent (#9b1c1c, warm/caring) without competing with
       content. Mirrors pointegrity.com's family-tag-cura treatment
       so the same hue appears across the brand surface and the app. */
    background: linear-gradient(rgba(155, 28, 28, 0.06), rgba(155, 28, 28, 0.06)),
                var(--color-card-bg);
    color: var(--color-fg);
    border-bottom: var(--motif-border-hairline);
    box-shadow: none;
    font-family: var(--font-sans);
}

/* Brand — Plex Serif, small (Plex Sans body would compete with
   the same family used in nav links; serif gives identity). */
[data-family="cura"] .navbar-brand {
    font-family: var(--motif-font-display);
    font-weight: 500;
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
    color: var(--color-fg);
}

/* Nav links — quiet, with the bottom-rule offset underline on
   hover/active. Fits the same vocabulary as auth-links.
   Size bumped from motif's --text-sm (14px) to 0.9375rem (15px)
   so navbar items don't read smaller than dropdown items in a
   wider rail. */
[data-family="cura"] .navbar nav a,
[data-family="cura"] .navbar-nav a,
[data-family="cura"] .navbar-collapse > a {
    color: var(--color-fg-muted);
    background: transparent;
    border-radius: 0;
    font-size: 0.9375rem;
    font-weight: var(--font-medium);
    opacity: 1;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 1px;
}
[data-family="cura"] .navbar nav a:hover,
[data-family="cura"] .navbar-nav a:hover,
[data-family="cura"] .navbar-collapse > a:hover {
    color: var(--color-fg);
    background: transparent;
    text-decoration: underline;
    text-decoration-color: currentColor;
}
[data-family="cura"] .navbar nav a.active,
[data-family="cura"] .navbar-nav a.active,
[data-family="cura"] .navbar-collapse > a.active {
    color: var(--color-primary-700);
    background: transparent;
    text-decoration: underline;
    text-decoration-color: var(--color-secondary-500); /* amber accent */
    text-decoration-thickness: 2px;
}

/* Hamburger toggler — match the link color, keep the soft hover. */
[data-family="cura"] .navbar-toggler {
    color: var(--color-fg);
}
[data-family="cura"] .navbar-toggler:hover {
    background: var(--color-neutral-100);
}

/* User-chip avatar — sage tint, hairline border. */
[data-family="cura"] .nav-avatar {
    background: var(--color-primary-100);
    color: var(--color-primary-800);
    border: 1px solid var(--color-primary-200);
}
[data-family="cura"] .nav-avatar:hover {
    background: var(--color-primary-200);
}

/* Dropdown menu — paper-cream surface, hairline, paper-soft
   shadow. Items use the same Plex Sans body, with sage-on-hover
   that mirrors the link active state. */
[data-family="cura"] .dropdown-menu {
    background: var(--color-card-bg);
    border: var(--motif-border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--motif-shadow-paper-soft);
}
[data-family="cura"] .dropdown-menu .dropdown-item {
    color: var(--color-fg);
    font-size: var(--text-sm);
}
[data-family="cura"] .dropdown-menu .dropdown-item:hover {
    background: var(--color-neutral-100);
    color: var(--color-primary-700);
}

/* Dropdown header (avatar name + email at the top of the menu).
   Plex Mono small-caps for the email — same vocabulary as the
   auth verify-meta footer. */
[data-family="cura"] .dropdown-menu-header {
    color: var(--color-fg);
    border-bottom-color: var(--color-border);
}
[data-family="cura"] .dropdown-menu-header .name {
    font-weight: var(--font-semibold);
}
[data-family="cura"] .dropdown-menu-header .email {
    font-family: var(--motif-font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--motif-tracking-small-caps);
    color: var(--color-fg-muted);
    word-break: normal;
}

/* Mobile collapse — when the navbar is paper-cream, items
   inherit the dark fg correctly (no dark-on-dark bug). The
   border-top divider above the open menu uses the hairline
   token rather than the white-rgba default, since pi's navbar
   isn't dark. */
@media (max-width: 767px) {
    [data-family="cura"] .navbar-collapse {
        border-top: var(--motif-border-hairline);
        background: var(--color-card-bg);
    }
    /* Hover bg in flattened mobile state — neutral-100 reads
       fine on the cream navbar. The default rgba-white from
       motif doesn't apply here because we're not on a dark
       navbar, but explicit override is clearer. */
    [data-family="cura"] .navbar-collapse .dropdown-menu .dropdown-item:hover,
    [data-family="cura"] .navbar-collapse .dropdown-menu .dropdown-item:focus {
        background: var(--color-neutral-100);
    }
}

/* ════════════════════════════════════════════════════════════
 * Hero — pi voice
 * motif's default .hero is a primary-600 fill band — the
 * loudest possible thing on the page, opposite of pi's
 * "personal & quiet" tone. Replace with paper-cream surface,
 * Plex Serif display headline, optional kicker (Plex Mono
 * small-caps) above the title, restrained CTA pair.
 * ════════════════════════════════════════════════════════════ */

[data-family="cura"] .hero {
    background: transparent;
    color: var(--color-fg);
    border-radius: 0;
    padding: var(--space-16) var(--space-6);
    text-align: center;
}

[data-family="cura"] .hero-kicker {
    display: inline-block;
    font-family: var(--motif-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--motif-tracking-small-caps);
    color: var(--color-secondary-700);
    margin-bottom: var(--space-4);
}

[data-family="cura"] .hero h1 {
    font-family: var(--motif-font-display);
    /* Calibrated to real-world title lengths (8-12 words is
       typical — pointegrity.com's "Software that respects the
       person using it." is 8 words). Caps at 3.25rem at desktop
       so 8-word titles wrap to ~2 lines without becoming a
       typographic billboard. The min stays large enough to
       remain a display headline on mobile. */
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-fg);
    margin: 0 auto var(--space-5) auto;
    max-width: 22ch;
}

[data-family="cura"] .hero h2 {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--auth-text-color);
    margin: 0 auto var(--space-8) auto;
    max-width: 52ch;
}

/* Hero body copy — paragraphs, ledes, subs, CTA notes. Cura's
   hero is transparent paper-cream (like pi); body copy needs
   dark inheritance. The 0,3,1 specificity beats inline
   `.hero p.sub` color rules in legacy templates. */
[data-family="cura"] .hero p,
[data-family="cura"] .hero .sub,
[data-family="cura"] .hero .lede,
[data-family="cura"] .hero p.sub,
[data-family="cura"] .hero p.lede {
    color: var(--auth-text-color);
}
[data-family="cura"] .hero .cta-note,
[data-family="cura"] .hero p.cta-note {
    color: var(--color-fg-muted);
}

/* Hero CTA layout — flex row centered, gap consistent across
   .hero-actions and .cta-row containers. */
[data-family="cura"] .hero-actions,
[data-family="cura"] .hero .cta-row {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

/* Hero CTAs — cover both new (.hero-actions .btn-*) and legacy
   .hero .btn-* markup. Same terracotta vocabulary applied to
   either. */
[data-family="cura"] .hero-actions .btn,
[data-family="cura"] .hero .btn,
[data-family="cura"] .hero .btn-large {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
}
[data-family="cura"] .hero-actions .btn-primary,
[data-family="cura"] .hero .btn-primary,
[data-family="cura"] .hero .btn-large.primary {
    background: var(--color-primary-700);
    color: #fff;
    border-color: var(--color-primary-700);
}
[data-family="cura"] .hero-actions .btn-primary:hover,
[data-family="cura"] .hero .btn-primary:hover,
[data-family="cura"] .hero .btn-large.primary:hover {
    background: var(--color-primary-800);
}
[data-family="cura"] .hero-actions .btn-outline,
[data-family="cura"] .hero .btn-outline,
[data-family="cura"] .hero .btn-large:not(.primary) {
    background: transparent;
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-700);
}
[data-family="cura"] .hero-actions .btn-outline:hover,
[data-family="cura"] .hero .btn-outline:hover,
[data-family="cura"] .hero .btn-large:not(.primary):hover {
    background: var(--color-primary-50);
}

/* Hero-section fine accent — same 32px amber hairline used
   under the auth title. Centered above the kicker (or the
   h1 if no kicker). */
[data-family="cura"] .hero::before {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-secondary-500);
    margin: 0 auto var(--space-8) auto;
}

/* ════════════════════════════════════════════════════════════
 * Dark variant — pi family + data-theme="dark"
 * "Walnut paper" — the dark counterpart of warm cream. Same
 * tone vocabulary (warm, restrained, contour-led), inverted
 * lightness. Sage and amber stay; surface tokens swap.
 * ════════════════════════════════════════════════════════════ */

[data-family="cura"][data-theme="dark"] {
    /* Surface — warm dark tones, NOT the cool neutral-900
       motif's default dark mode swaps in. The point of pi is
       warmth; dark mode is dark walnut, not midnight. */
    --color-bg: #1c1814;
    --color-card-bg: #231f1a;
    --color-fg: #f5ede0;
    --color-fg-muted: #b8ac9c;
    --color-border: #3a322a;

    --auth-bg: #1c1814;
    --auth-card-bg: #231f1a;
    --auth-title-color: #f5ede0;
    --auth-text-color: #b8ac9c;

    /* CTA — sage-500 reads brighter on dark surfaces than the
       light-mode sage-700; cream-text rather than pure white
       keeps the warm-family voice (no SaaS-blue-on-cobalt
       feel). Cream + sage gives ~4.0:1 contrast — borderline
       for AA small text but fine for the medium-large button
       label. */
    --auth-action-bg: var(--color-primary-500);
    --auth-action-color: #f5ede0;

    /* Links — sage-300 sits gently on dark cream-text, with
       the underline still in current-color. */
    --auth-link-color: var(--color-primary-300);

    /* Inputs — bottom-rule in muted warm-dark; focus glows
       in sage-400 with a slightly brighter halo. */
    --auth-input-rest-color: #3a322a;
    --auth-input-focus-color: var(--color-primary-400);
    --auth-focus-ring: 0 4px 0 -3px rgba(184, 92, 58, 0.32);

    /* Site link — lifted off the page floor (was #6b6258 → too
       muted to register on the warm-dark surface); hover comes
       up to cream. */
    --auth-site-link-color: #8a7f73;
    --auth-site-link-hover: #f5ede0;

    /* Shadows — true blacks on dark (no warm tint, since the
       page is already warm). Slightly heavier alpha to register
       depth on a dark surface. */
    --motif-shadow-paper-soft:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 8px 24px -8px rgba(0, 0, 0, 0.5);

    /* Hairline — the same border token, but pointing at the
       warm-dark instead of neutral-200. */
    --motif-border-hairline: 1px solid #3a322a;
}

/* Paper-grain noise inversion — light warm noise on dark
   walnut, lower opacity to keep texture without muddiness. */
[data-family="cura"][data-theme="dark"] .auth-shell::before {
    opacity: 0.4;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.7  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Amber accent stays — but bumps to amber-400 on dark for
   visibility against the warm-dark page. */
[data-family="cura"][data-theme="dark"] .auth-logo::after {
    background: var(--color-secondary-400);
}

/* Step marker on multi-step flows — also amber-400. */
[data-family="cura"][data-theme="dark"] .auth-step {
    color: var(--color-secondary-400);
}

/* Verify-email icon — primary becomes sage-300 on dark for
   parity with the link color. */
[data-family="cura"][data-theme="dark"] .auth-icon.success {
    color: var(--color-primary-300);
}

/* CTA hover — slide brighter, not darker. */
[data-family="cura"][data-theme="dark"] .auth-submit:hover,
[data-family="cura"][data-theme="dark"] .auth-action:hover {
    background: var(--color-primary-400);
}

/* Lang switcher / muted Plex Mono labels — bump up tone so
   they don't disappear on dark. */
[data-family="cura"][data-theme="dark"] .lang-switcher {
    color: #8a7f73;
}
[data-family="cura"][data-theme="dark"] .form-label {
    color: #b8ac9c;
}

/* Navbar dark — paper-walnut surface, hairline using the warm-
   dark border, brand and links lift to cream/muted-cream. */
[data-family="cura"][data-theme="dark"] .navbar {
    background: var(--color-card-bg);   /* #231f1a */
    color: var(--color-fg);             /* #f5ede0 */
}
[data-family="cura"][data-theme="dark"] .navbar-brand {
    color: var(--color-fg);
}
[data-family="cura"][data-theme="dark"] .navbar nav a,
[data-family="cura"][data-theme="dark"] .navbar-nav a,
[data-family="cura"][data-theme="dark"] .navbar-collapse > a {
    color: var(--color-fg-muted);
}
[data-family="cura"][data-theme="dark"] .navbar nav a:hover,
[data-family="cura"][data-theme="dark"] .navbar-nav a:hover,
[data-family="cura"][data-theme="dark"] .navbar-collapse > a:hover {
    color: var(--color-fg);
}
[data-family="cura"][data-theme="dark"] .navbar nav a.active,
[data-family="cura"][data-theme="dark"] .navbar-nav a.active,
[data-family="cura"][data-theme="dark"] .navbar-collapse > a.active {
    color: var(--color-primary-300);
    text-decoration-color: var(--color-secondary-400);
}
[data-family="cura"][data-theme="dark"] .navbar-toggler:hover {
    background: rgba(255, 255, 255, 0.06);
}
[data-family="cura"][data-theme="dark"] .nav-avatar {
    background: rgba(184, 92, 58, 0.18);   /* terracotta at low alpha */
    color: var(--color-primary-300);
    border-color: rgba(184, 92, 58, 0.32);
}
[data-family="cura"][data-theme="dark"] .nav-avatar:hover {
    background: rgba(184, 92, 58, 0.28);
}
[data-family="cura"][data-theme="dark"] .dropdown-menu {
    background: #2a2520;     /* slightly brighter than card so it floats */
    border-color: #3a322a;
}
[data-family="cura"][data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--color-fg);
}
[data-family="cura"][data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-primary-300);
}
[data-family="cura"][data-theme="dark"] .dropdown-menu-header {
    color: var(--color-fg);
    border-bottom-color: #3a322a;
}
[data-family="cura"][data-theme="dark"] .dropdown-menu-header .email {
    color: var(--color-fg-muted);
}

/* Mobile dark — the flattened collapse needs the warm-dark
   hover instead of motif's rgba-white default. */
@media (max-width: 767px) {
    [data-family="cura"][data-theme="dark"] .navbar-collapse {
        border-top-color: #3a322a;
        background: var(--color-card-bg);
    }
    [data-family="cura"][data-theme="dark"] .navbar-collapse .dropdown-menu .dropdown-item:hover,
    [data-family="cura"][data-theme="dark"] .navbar-collapse .dropdown-menu .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* Hero in dark mode — same paper-walnut surface as the page,
   typography stays the same. CTA primary becomes sage-500 to
   match the auth-submit treatment. */
[data-family="cura"][data-theme="dark"] .hero h1 {
    color: var(--color-fg);
}
[data-family="cura"][data-theme="dark"] .hero h2 {
    color: var(--auth-text-color);
}
[data-family="cura"][data-theme="dark"] .hero-actions .btn-primary {
    background: var(--color-primary-500);
    color: var(--color-fg);    /* cream, not white */
    border-color: var(--color-primary-500);
}
[data-family="cura"][data-theme="dark"] .hero-actions .btn-primary:hover {
    background: var(--color-primary-400);
}
[data-family="cura"][data-theme="dark"] .hero-actions .btn-outline {
    color: var(--color-primary-300);
    border-color: var(--color-primary-300);
}
[data-family="cura"][data-theme="dark"] .hero-actions .btn-outline:hover {
    background: rgba(184, 92, 58, 0.12);
}
[data-family="cura"][data-theme="dark"] .hero-kicker {
    color: var(--color-secondary-400);
}
[data-family="cura"][data-theme="dark"] .hero::before {
    background: var(--color-secondary-400);
}

/* Optional: respect the OS preference when no explicit
   data-theme is set. Same selector body, just media-gated. */
@media (prefers-color-scheme: dark) {
    [data-family="cura"]:not([data-theme="light"]):not([data-theme="dark"]) {
        --color-bg: #1c1814;
        --color-card-bg: #231f1a;
        --color-fg: #f5ede0;
        --color-fg-muted: #b8ac9c;
        --color-border: #3a322a;
        --auth-bg: #1c1814;
        --auth-card-bg: #231f1a;
        --auth-title-color: #f5ede0;
        --auth-text-color: #b8ac9c;
        --auth-action-bg: var(--color-primary-500);
        --auth-action-color: #f5ede0;
        --auth-link-color: var(--color-primary-300);
        --auth-input-rest-color: #3a322a;
        --auth-input-focus-color: var(--color-primary-400);
        --auth-focus-ring: 0 4px 0 -3px rgba(184, 92, 58, 0.32);
        --auth-site-link-color: #8a7f73;
        --auth-site-link-hover: #f5ede0;
        --motif-shadow-paper-soft:
            0 1px 2px rgba(0, 0, 0, 0.3),
            0 8px 24px -8px rgba(0, 0, 0, 0.5);
        --motif-border-hairline: 1px solid #3a322a;
    }
}