/* SPDX-License-Identifier: Apache-2.0 */
/* Copyright 2026 dwot */

/* CannaDB design tokens — the single source of truth for color, type, and
 * rhythm. Loaded before cannadb.css; every component class consumes these
 * via var(--…). Hardcoded values in cannadb.css are bugs.
 *
 * Phase 3.6 brand identity: warm, character-driven, anchored by the Sage
 * mascot and the sticker-treatment Bagel Fat One wordmark. Bagel Fat One
 * is reserved for the wordmark/logo only — every other heading and body
 * runs in Inter so the page stays readable and AA-clear at small sizes.
 */

/* ─── Self-hosted faces ─────────────────────────────────────────
 * No external CDNs. Both faces ship as woff2 from /static/fonts.
 * Inter is the universal UI face. Bagel Fat One is loaded for the
 * SVG wordmark in layout.html / home.html only — referenced there
 * by literal font-family on the inline <g>, not by any CSS rule
 * in this codebase.
 */
@font-face {
    font-family: 'Bagel Fat One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/BagelFatOne-Regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/Inter-Variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

:root {
    /* Tells the UA that light is our default; the [data-theme="dark"]
     * block below flips this to "dark" so form controls, scrollbars,
     * and the browser's own surfaces follow the page theme. */
    color-scheme: light;

    /* ─── Brand ────────────────────────────────────────────────── */
    --color-brand-yellow:      #FFD56B;
    --color-brand-yellow-deep: #F5B423;
    --color-brand-ink:         #3E2C45;

    /* ─── Mascot (Sage) ────────────────────────────────────────── */
    --color-sage-body:      #F2D5A3;
    --color-sage-stripe:    #D9B07F;
    --color-sage-highlight: #FFE9C8;
    --color-sage-sprout:    #A8E0C0;
    --color-sage-stem:      #5B9F6B;
    --color-sage-blush:     #FF9DBE;

    /* ─── Tags ─────────────────────────────────────────────────── */
    --color-tag-hybrid-bg:  #A8E0C0;
    --color-tag-hybrid-fg:  #1F5C3D;
    --color-tag-indica-bg:  #E8C8FF;
    --color-tag-indica-fg:  #5A3A85;
    --color-tag-sativa-bg:  #FFE9C8;
    --color-tag-sativa-fg:  #7A4D12;
    --color-tag-thc-bg:     #FFE9C8;
    --color-tag-thc-fg:     #7A4D12;
    --color-tag-pick-bg:    #FFE9F0;
    --color-tag-pick-fg:    #9B3F6C;

    /* ─── Cut / clone surface (rust accent) ──────────────────────
     * Used by .kind-cut chip, the indica end of the lean-bar
     * gradient, and the legend-cut diamond on the lineage page.
     * Tokenized in Phase 6 (night mode) so the rust palette has a
     * dark-mode counterpart instead of glaring on a dark surface.
     */
    --color-cut-fg:        #6B3A2F;
    --color-cut-bg:        #F6EBE6;
    --color-cut-border:    #C8A89C;
    --color-cut-accent:    #A06155;  /* legend-cut diamond stroke */

    /* ─── Surface ──────────────────────────────────────────────── */
    --color-bg:           #FFFCF5;
    --color-bg-cream:     #FFF6E8;
    --color-bg-elev:      #FFFFFF;
    --color-bg-lavender:  #F0EBFA;
    --color-bg-sunken:    #FFF6E8;  /* legacy alias for bg-cream until redesign */

    --color-fg:           #3E2C45;  /* = brand-ink */
    --color-fg-strong:    #2A1E2F;  /* slightly darker than fg for h1 emphasis */
    --color-fg-muted:     #7866A8;  /* meta, breadcrumbs, byline lavender */
    --color-fg-soft:      #5A4A4F;  /* long-form body at slightly lower contrast */
    --color-fg-faint:     #9889C0;  /* placeholders, dim labels */

    --color-border:        #E8E4FB;
    --color-border-strong: #C9C0E8;

    /* ─── Accent (= brand yellow CTA) ─────────────────────────── */
    --color-accent:        #FFD56B;  /* = brand-yellow */
    --color-accent-hover:  #F5B423;  /* = brand-yellow-deep */
    --color-accent-soft:   #FFF6E8;  /* cream-tinted backdrop for accent surfaces */
    --color-accent-fg:     #3E2C45;  /* = brand-ink: text on yellow */

    /* ─── Trust tier surfaces ─────────────────────────────────── */
    --color-editorial:        #1F5C3D;  /* editorial / canonical / CannaDB-published */
    --color-editorial-soft:   #E8F5DC;
    --color-community:        #7A4D12;  /* community claims, unverified contributors */
    --color-community-soft:   #FFE9C8;

    /* Legacy companion names — bg/fg/border roles map onto the new tier values. */
    --color-editorial-bg:     #E8F5DC;
    --color-editorial-border: #1F5C3D;
    --color-editorial-fg:     #1F5C3D;
    --color-community-bg:     #FFE9C8;
    --color-community-border: #7A4D12;
    --color-community-fg:     #7A4D12;

    /* ─── Semantic state ──────────────────────────────────────── */
    /* Roles unchanged from prior token shape; hex values retuned to harmonize
     * with the warm-neutral surfaces. Each fg meets AA on its bg. */
    --color-success:        #1F5C3D;
    --color-success-bg:     #E8F5DC;
    --color-success-border: #A8E0C0;

    --color-warning:        #7A4D12;
    --color-warning-bg:     #FFE9C8;
    --color-warning-border: #E2C68A;

    --color-danger:         #9B2B3D;
    --color-danger-bg:      #FCE3E7;
    --color-danger-border:  #E8B5BC;
    /* Foreground for text/icons placed on top of --color-danger as a fill
     * (e.g. .btn-danger). White meets AA on the deep light-mode danger but
     * fails on the lifted dark-mode pink — the dark override below pairs
     * with brand-ink instead. */
    --color-on-danger:      #FFFFFF;

    --color-info:           #5A3A85;
    --color-info-bg:        #F0EBFA;
    --color-info-border:    #D9CDF0;

    /* Focus ring — deliberately distinct from brand yellow. */
    --color-focus:         #1B6DAB;

    /* ─── Wordmark ────────────────────────────────────────────────
     * The sticker SVG wordmark in layout.html / home.html paints
     * its outline + fill from these tokens. Light mode: dark-ink
     * outline over yellow fill (the brand sticker). Dark mode:
     * cream outline over yellow fill so the sticker treatment
     * still reads on a deep-plum chrome.
     */
    --color-wordmark-fill:    #FFD56B;  /* = brand-yellow */
    --color-wordmark-stroke:  #3E2C45;  /* = brand-ink */

    /* ─── Typography ────────────────────────────────────────────
     * Inter is the universal UI face — body, headings, buttons,
     * the lot — chosen for legibility and AA contrast at every
     * size. Bagel Fat One ships only inside the SVG wordmark in
     * layout.html / home.html, so it's referenced there by literal
     * font-family on the <g> element rather than via a token.
     * Modular scale × 1.2 anchored at 16px body.
     */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Liberation Sans", sans-serif;
    --font-serif:   Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --text-2xs:   0.6875rem;  /* 11px — secondary trust pills (community-primary retune) */
    --text-xs:    0.75rem;    /* 12px — captions, badges */
    --text-sm:    0.875rem;   /* 14px — small UI */
    --text-base:  1rem;       /* 16px — body */
    --text-lg:    1.125rem;   /* 18px — lede */
    --text-xl:    1.25rem;    /* 20px — h3, mini wordmark */
    --text-2xl:   1.5rem;     /* 24px — h2, sticker section header */
    --text-3xl:   1.875rem;   /* 30px — h1 on content pages */
    --text-4xl:   2.375rem;   /* 38px — hero h1 on landing surfaces */
    --text-5xl:   3rem;       /* 48px — hero wordmark, strain-name hero */

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.55;
    --leading-prose:  1.65;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    900;

    --tracking-tight: -0.01em;
    --tracking-wide:  0.04em;

    /* ─── Spacing (4px base) ──────────────────────────────────── */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.5rem;    /* 24px */
    --space-6:  2rem;      /* 32px */
    --space-7:  3rem;      /* 48px */
    --space-8:  4rem;      /* 64px */

    /* ─── Layout ──────────────────────────────────────────────── */
    --max-width:        72rem;
    --max-width-prose:  44rem;
    --max-width-form:   36rem;

    /* ─── Border radius ───────────────────────────────────────── */
    --radius-sm:   2px;
    --radius:      4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-pill: 999px;

    /* ─── Shadow ──────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(62, 44, 69, 0.05);
    --shadow:    0 2px 6px rgba(62, 44, 69, 0.08);
    --shadow-lg: 0 6px 18px rgba(62, 44, 69, 0.10);

    /* Modal scrim — plum veil that reads on light surfaces. The dark-theme
     * block swaps in a stronger black scrim so it still registers against
     * deep-plum chrome. */
    --color-modal-backdrop: rgba(62, 44, 69, 0.55);

    /* ─── Motion ──────────────────────────────────────────────── */
    --duration-fast: 100ms;
    --duration:      180ms;
    --duration-slow: 300ms;
    --easing:        cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Z-index scale ───────────────────────────────────────── */
    --z-header:     20;
    --z-dropdown:   30;
    --z-toast:      40;
    --z-modal:      50;
}

/* ─── Dark theme overrides ──────────────────────────────────────
 * Selected explicitly via [data-theme="dark"] on <html>; the
 * pre-paint inline script in layout.html resolves "auto" against
 * prefers-color-scheme and writes either "light" or "dark" before
 * the first paint, so this block is the single source of dark
 * truth (no media-query forking, no specificity gymnastics).
 *
 * Direction: deep-ink + brand-yellow. Surfaces are darker shades
 * of brand-ink (#3E2C45 → #1A1320 / #241830 / #2A1E36); fg is a
 * warm parchment (#F0E6DA) so body type still reads as "ink on
 * paper" rather than fluorescent white. The brand-yellow CTA is
 * preserved verbatim — it's the through-line between the modes.
 *
 * Tag pills (--color-tag-*) keep their light-mode fg/bg pairs:
 * pastel-on-dark already meets AA, and changing them would
 * desaturate the cannabis-domain visual vocabulary.
 *
 * Contrast spot-checks (≥ AA at body size unless noted):
 *   fg #F0E6DA / bg #1A1320 ≈ 14.2 : 1
 *   fg-muted #B5A5D9 / bg #1A1320 ≈ 8.0 : 1
 *   accent-fg #3E2C45 / accent #FFD56B ≈ 9.4 : 1 (unchanged)
 *   wordmark-fill #FFD56B / bg #1A1320 ≈ 13.1 : 1
 */
[data-theme="dark"] {
    color-scheme: dark;

    /* --color-brand-ink stays at its light value (#3E2C45). In dark
     * mode it reads as "the elevated plum surface that holds yellow
     * type" — the .btn-primary body, the .kind-option.is-active
     * pill, and the .trending-badge text — all of which still want
     * the same plum/yellow contrast pair regardless of background.
     * The sticker outline is decoupled to --color-wordmark-stroke
     * below so it can flip to cream on dark surfaces. */

    /* Surfaces — climb from sunken plum-black up through the
     * elevated deck. Hero / rail surfaces (--color-bg-cream) lean
     * a touch warmer so cream-named blocks still feel cream-tinted. */
    --color-bg:            #1A1320;
    --color-bg-cream:      #2A1E36;
    --color-bg-elev:       #241830;
    --color-bg-lavender:   #33264A;
    --color-bg-sunken:     #15101A;

    /* Foreground — parchment ramping up to near-white for h1
     * emphasis, with lavender muted/faint tones lifted bright
     * enough to clear AA on the elevated deck. */
    --color-fg:            #F0E6DA;
    --color-fg-strong:     #FFFCF5;
    --color-fg-muted:      #B5A5D9;
    --color-fg-soft:       #D4C4D0;
    --color-fg-faint:      #8A7AB0;

    /* Borders — quiet plum, slightly elevated. */
    --color-border:        #3D2F4F;
    --color-border-strong: #5A4978;

    /* Accent — yellow CTA preserved. accent-soft becomes a warm
     * brown-plum so .btn-primary backdrops and ::selection still
     * glow yellow against a darker pad. accent-fg stays brand-ink
     * because text on brand-yellow is unchanged in either mode. */
    --color-accent:        #FFD56B;
    --color-accent-hover:  #F5B423;
    --color-accent-soft:   #3D2F1F;
    --color-accent-fg:     #3E2C45;

    /* Trust tiers — invert the bg/fg so the darker tone is the
     * surface and the brighter tone is the text. */
    --color-editorial:        #A8E0C0;
    --color-editorial-soft:   #1F3D2A;
    --color-community:        #FFD9A0;
    --color-community-soft:   #3D2D1A;

    --color-editorial-bg:     #1F3D2A;
    --color-editorial-border: #A8E0C0;
    --color-editorial-fg:     #A8E0C0;
    --color-community-bg:     #3D2D1A;
    --color-community-border: #FFD9A0;
    --color-community-fg:     #FFD9A0;

    /* Semantic state — same inversion, lifted hues meet AA on
     * their darkened bgs. */
    --color-success:        #9CD9B0;
    --color-success-bg:     #1A3325;
    --color-success-border: #2E5A40;

    --color-warning:        #E8C68A;
    --color-warning-bg:     #332515;
    --color-warning-border: #5A4520;

    --color-danger:         #E8A0AF;
    --color-danger-bg:      #3D1A22;
    --color-danger-border:  #5A2A35;
    /* Brand-ink on lifted-pink danger fill — ~9.4:1 against #E8A0AF.
     * Pairs with the inverted .btn-primary plum-on-yellow contrast pair. */
    --color-on-danger:      #3E2C45;

    --color-info:           #C5B0E8;
    --color-info-bg:        #2A2040;
    --color-info-border:    #3D2F5A;

    /* Cut / clone — rust on darkened terracotta. */
    --color-cut-fg:         #E8A88E;
    --color-cut-bg:         #3D2520;
    --color-cut-border:     #5A3528;
    --color-cut-accent:     #A06155;

    /* Focus ring — lifted to clear the deep-ink chrome. */
    --color-focus:          #5BA8E0;

    /* Wordmark — cream outline so the sticker still reads as a
     * sticker on a dark deck. Fill flips to brand-ink so the
     * letters become a cream-outlined plum on plum-black; yellow
     * fill plus cream stroke wash each other out at body-header
     * scale, which is what every sticker headline outside the
     * hero wordmark renders at. */
    --color-wordmark-stroke: #F0E6DA;
    --color-wordmark-fill:   #3E2C45;

    /* Shadows — black, slightly heavier alpha so the soft drop
     * still registers against the dark deck. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow:    0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.55);

    /* Modal backdrop — the default plum veil reads on light
     * surfaces but vanishes against deep-plum chrome, so dark
     * mode swaps in a stronger black scrim. */
    --color-modal-backdrop: rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration:      0ms;
        --duration-slow: 0ms;
    }
}