/* Plus Jakarta Sans is self-hosted — see the @font-face block at the top of
   shell.css for the latin/latin-ext files. */

/* Token base = the Cream ramp / Light. Palettes override via [data-palette].
   NOTE: Cream is only the base *layer*, not the default palette — the slate
   block further down also matches a root with no [data-palette] at all, so
   "no stored preference" paints slate without anyone having to name it.
   (Kassza's default is plum; the starter moved the default to slate, spec D13,
   and plum keeps its own [data-palette="plum"] block like the others.) */

:root {
    /* Phase 1 redesign tokens — pastel palette, larger card radius, softer
       shadow stack, Plus Jakarta Sans display family. Card styling uses the
       --et-card-radius-* and --et-shadow-card pair; the --et-shadow-* scale
       further down serves non-card chrome. */
    --et-card-radius-lg: 18px;
    --et-card-radius-md: 16px;
    --et-card-radius-sm: 12px;
    --et-shadow-card:       0 2px 10px rgba(0, 0, 0, 0.05);
    --et-shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.10);

    /* Primary CTA gradient pill — shared token so header, hero, event-card,
       FAB, etc. don't drift when the design retunes.

       The CTA follows the PALETTE: every palette block below restates the three
       source values (-shadow-rgb, -gradient, -gradient-hover) and the two
       shadow tokens derive from them, which is what makes the primary buttons
       switch with the color style instead of staying plum forever. The values
       here in :root are CREAM's — this block is the Cream ramp, and cream is
       the one palette with no [data-palette] block of its own to hold them.

       They deliberately do NOT follow the theme: the dark blocks leave all of
       these alone, so a palette's CTA looks the same in light and dark, exactly
       as it did when the gradient was a single hardcoded plum (owner decision,
       2026-09-07 — palette yes, light/dark no).

       The recipe each palette follows:
         start (0%)  = the palette accent, darkened where the raw accent can't
                       carry white 14/700 label text at 4.5:1 (coral and blue —
                       see their blocks). Never lighter than 4.5:1.
         mid (55%)   = 70% start + 30% of the #1F1F1F end stop.
         end (100%)  = #1F1F1F, shared by every palette — the charcoal anchor is
                       what makes the pill read as one family across palettes.
         hover       = every stop +17 per channel (clamped), the delta the
                       original plum pair already shipped.
       Plum below is the hand-tuned original this recipe approximates, so it
       keeps its exact shipped triplet rather than the computed one.

       --et-cta-shadow-rgb is the start stop as bare rgb channels: the two
       shadow tokens build on it, and so do the CTA shadows in ds.css that need
       their own blur/alpha (.et-fab, .et-empty-cta). That way a palette
       overrides ONE value instead of restating five shadows. */
    --et-cta-shadow-rgb:     27, 92, 255;
    --et-cta-gradient:       linear-gradient(135deg, #1B5CFF 0%, #1C4ABC 55%, #1F1F1F 100%);
    --et-cta-gradient-hover: linear-gradient(135deg, #2C6DFF 0%, #2D5BCD 55%, #2F2F2F 100%);
    --et-cta-shadow:         0 4px 14px rgba(var(--et-cta-shadow-rgb), 0.35);
    --et-cta-shadow-hover:   0 6px 18px rgba(var(--et-cta-shadow-rgb), 0.42);

    --et-font-family-base: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

    --et-accent-yellow:   #FFEB00;
    --et-warm-charcoal:   #3A2F2F;
    /* R3-01: the notification bell's fill. Warm yellow, not --et-accent-yellow —
       that one is a neon palette color, too loud for filling an icon body.
       Not theme-dependent (not redefined under [data-theme="dark"] below), so
       it stays the same warm yellow on both surfaces — deliberately, it reads
       fine against both the light and dark bell stroke/background. */
    --et-bell-fill:       #F6C945;
    /* 2026-09-16: the group header Settings gear's fill (EtIconButton
       Icon="gear"), same treatment as the bell above — a soft, non-neon tint
       so the drawn SVG reads as an icon rather than a swatch. A light
       lavender derived from the plum accent rather than --et-pastel-lavender
       (that token is shared with tag/badge fills elsewhere and would couple
       the two). Not theme-dependent, same reasoning as --et-bell-fill: the
       gear always sits on its own translucent-white disc
       (.et-group-header-disc, ds.css), not directly on the page surface, so
       one value reads fine in both themes. */
    --et-gear-fill:       #D9C9E6;

    /* Pastel palette — used for category tags, badges, soft fills. */
    --et-pastel-rose:     #F5C9C9;
    --et-pastel-blue:     #C9DCF5;
    --et-pastel-green:    #C9F5D5;
    --et-pastel-mustard:  #F5E5C9;
    --et-pastel-lavender: #E5C9F5;
    --et-pastel-peach:    #F5D5C9;

    /* Surfaces (Cream light) */
    --et-color-bg:           #FAFAF7;
    --et-color-surface:      #FFFFFF;
    --et-color-surface-2:    #F4F3EF;
    --et-color-border:       #E9E7E1;
    --et-color-border-strong: #D8D5CC;

    /* Ink (light) */
    --et-color-ink:    #0E0E0F;
    --et-color-ink-2:  #53514B;
    --et-color-ink-3:  #8F8C83;
    --et-color-ink-4:  #B6B3AA;

    /* Semantic (light) */
    --et-color-owed:    #15764A;
    --et-color-owe:     #C0392B;
    --et-color-pend:    #B7791F;
    /* Follows the palette accent everywhere — override in a palette block
       only if the two ever need to diverge. */
    --et-color-sent:    var(--et-color-accent);
    --et-color-neutral: #8F8C83;
    --et-color-accent:  #1B5CFF;

    /* Card-stripe accent — decorative left-edge color on .et-card-accent.
       Tuned per palette to sit in-family with the surface tones rather
       than fight them; Cream gets a warm taupe (not a cool blue-grey) so
       the stripe blends into the beige chrome. */
    --et-color-card-stripe: #8B7355;

    /* Status backgrounds */
    --et-status-bg-pending:   #FBEFD7;
    --et-status-bg-sent:      #E4ECFF;
    --et-status-bg-confirmed: #DCEFE2;
    --et-status-bg-paid:      #DCEFE2;
    --et-status-bg-logged:    #ECEAE3;
    --et-status-bg-cancelled: #ECEAE3;
    --et-status-bg-declined:  #ECEAE3;
    --et-status-bg-edited:    #ECEAE3;

    /* Radii — cards use --et-card-radius-* above. */
    --et-radius-pill: 9999px;

    /* Spacing */
    --et-space-0:  0;
    --et-space-1:  4px;
    --et-space-2:  8px;
    --et-space-3:  12px;
    --et-space-4:  16px;
    --et-space-5:  20px;
    --et-space-6:  24px;
    --et-space-8:  32px;
    --et-space-10: 40px;
    --et-space-12: 48px;
    --et-space-16: 64px;

    /* Typography stacks. Single sans family across the app — keeps the
       hierarchy (h4 title vs. h6 card head) carried purely by size + weight,
       no serif/sans mix. */
    --et-font-sans: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', 'Roboto', sans-serif;
    --et-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    /* Shadows */
    --et-shadow-none: none;
    --et-shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
    --et-shadow-md:   0 2px 6px rgba(0,0,0,0.06);
    --et-shadow-lg:   0 1px 3px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.10);
    --et-shadow-xl:   0 2px 6px rgba(0,0,0,0.08), 0 14px 32px rgba(0,0,0,0.18);

    /* Layout. */
    --et-drawer-width:  260px;
    --et-appbar-height: 64px;

    /* Installed-app bottom bar (spec 2026-09-19 §3.1, app.css .et-bottom-bar).
       The bar's own height and .main-content's bottom clearance both read this
       one number, plus env(safe-area-inset-bottom) on each side. That is the
       lesson of the Mud-era BottomNav this replaces (it lived here from
       2026-05 to 2026-08): the bar and the space kept for it were two separate
       literals, and they drifted apart. Declared unconditionally even though
       only .et-standalone below 960px ever paints the bar — a token costs
       nothing where it is unused, and a conditional one cannot be read by a
       rule outside the condition. */
    --et-bottom-bar-height: 64px;

    /* How far the floating action pill (.et-fab) sits above the bottom of the
       viewport. A token because the page's own bottom clearance in app.css is
       derived from it — raise the pill and the content below it stays clear
       automatically. The safe-area term went LIVE on 2026-09-22, when the
       viewport meta gained viewport-fit=cover (spec §4.4): where there is a
       home indicator the pill now clears it instead of sitting on it. var()
       before env() because Capacitor SystemBars injects --safe-area-inset-*
       for Android WebViews below 140, which answer env() with 0. */
    --et-fab-bottom: calc(22px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));

    /* Motion (2026-09-25). One vocabulary for what moves, so a sheet, a page
       and a bar that change state together also finish together. Enter slower
       than exit: something arriving has to be followed, something leaving only
       has to get out of the way. The enter pair is the bottom sheet's own rise
       (300ms on this curve since the DS round), so the tokens describe what
       already ships rather than a new feel; the exit curve accelerates, the
       way the sheet's swipe-dismiss already leaves (etSheetDrag, ease-in). */
    --et-motion-fast:  120ms;   /* a colour or a line changing state */
    --et-motion-exit:  200ms;   /* something leaving: a sheet, the old page */
    --et-motion-enter: 300ms;   /* something arriving: a sheet, the new page */
    --et-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --et-ease-enter:    cubic-bezier(0.22, 0.61, 0.36, 1);
    --et-ease-exit:     cubic-bezier(0.4, 0, 1, 1);

    /* Spec D13 — four literals the shell and the DS painted by hand, now tokens
       so a palette or the dark theme can reach them:
       --et-cta-ink         the ink on a filled control: the CTA gradient, an
                            accent or status fill, the avatar disc, a switch knob.
       --et-frame-bg        the backdrop the >=960px app card floats on (shell.css
                            "App frame").
       --et-panel-footer-bg the docked panel footer's frosted strip (ds.css EtPanel).
       --et-avatar-ring     the top-bar avatar's double ring (shell.css). */
    --et-cta-ink:         #FFFFFF;
    --et-frame-bg:        #E5E2DB;
    --et-panel-footer-bg: rgba(250, 248, 243, 0.92);
    --et-avatar-ring:     0 0 0 2px #FFFFFF, 0 0 0 3.5px #ECE8DF;
}

/* Installed PWA / native shell (.et-standalone, stamped in app-init.js). With
   no browser toolbar parked below the viewport, the browser's 22px reads as
   pinned to the physical bottom edge — right where the home indicator and the
   Android gesture pill live. This is the ONE number to tune if the pill still
   sits too low or now floats too high. */
:root.et-standalone {
    --et-fab-bottom: calc(48px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ───────── Palette: Slate ─────────
   The starter's DEFAULT palette (spec D13): the first selector applies when
   nothing has stamped [data-palette]. The :where() keeps it at (0,1,0) — the
   weight of [data-palette="slate"] beside it, of :root above and of
   [data-theme="dark"] below — so source order decides: these values beat the
   :root base and lose to the dark base. A plain :root:not([data-palette])
   would be (0,2,0) and outrank [data-theme="dark"], painting light surfaces
   for a first-time visitor in dark mode. (Kassza's plum block, below,
   explains the same trick at length.) */
:root:where(:not([data-palette])),
[data-palette="slate"] {
    --et-color-bg:            #F5F6F7;
    --et-color-surface-2:     #EEEFF1;
    --et-color-border:        #E4E6E9;
    --et-color-border-strong: #D4D6D9;
    --et-color-accent:        #3D4EFF;
    --et-color-card-stripe:   #5B6A80;   /* cool slate-blue */
    /* Accent carries white at 5.7:1, so the start stop IS the accent. */
    --et-cta-shadow-rgb:      61, 78, 255;
    --et-cta-gradient:        linear-gradient(135deg, #3D4EFF 0%, #3440BC 55%, #1F1F1F 100%);
    --et-cta-gradient-hover:  linear-gradient(135deg, #4E5FFF 0%, #4551CD 55%, #2F2F2F 100%);
    /* The docked panel footer frosts the page background: the cool slate bg at
       92% rather than the base's warm literal (spec D13). */
    --et-panel-footer-bg:     rgba(245, 246, 247, 0.92);
}

/* ───────── Palette: Coral ───────── */
[data-palette="coral"] {
    --et-color-bg:            #FFF6F2;
    --et-color-surface-2:     #FBE8DE;
    --et-color-border:        #F4D7CB;
    --et-color-border-strong: #E9C2B2;
    --et-color-accent:        #FF6B5B;
    --et-color-card-stripe:   #C8755C;   /* muted terracotta */
    /* The raw accent is the one that CANNOT start the gradient: #FF6B5B carries
       white at only 2.8:1, well under AA for the pill's 14/700 label (bold 14px
       is not WCAG "large text"). Start from a deeper step of the same hue
       instead — #C04A3A is hue 7° vs the accent's 6°, and reaches 4.9:1. */
    --et-cta-shadow-rgb:      192, 74, 58;
    --et-cta-gradient:        linear-gradient(135deg, #C04A3A 0%, #903D32 55%, #1F1F1F 100%);
    --et-cta-gradient-hover:  linear-gradient(135deg, #D15B4B 0%, #A14E43 55%, #2F2F2F 100%);
}

/* ───────── Palette: Blue ─────────
   Pulled from the PDF Tools design system — pdf-blue as accent, the original
   pdf-section-bg as the tinted surface-2, with a softer blue tint for bg
   and matching blue-grey borders. Status colors stay shared with light. */
[data-palette="blue"] {
    --et-color-bg:            #F4F8FC;
    --et-color-surface-2:     #ECF6FE;
    --et-color-border:        #D8E5F1;
    --et-color-border-strong: #B8CEE0;
    --et-color-accent:        #0081DA;
    --et-color-card-stripe:   #0081DA;   /* pdf-blue, keeps brand punch */
    /* pdf-blue lands at 4.1:1 on white — just under AA — so the start stop is
       one step down at #0070C0 (same 205° hue, 5.2:1). The accent itself stays
       untouched everywhere else; only the white-on-gradient pill needs this. */
    --et-cta-shadow-rgb:      0, 112, 192;
    --et-cta-gradient:        linear-gradient(135deg, #0070C0 0%, #095890 55%, #1F1F1F 100%);
    --et-cta-gradient-hover:  linear-gradient(135deg, #1181D1 0%, #1A69A1 55%, #2F2F2F 100%);
}

/* ───────── Palette: Sage ─────────
   Modern warm-green. Background sits on a barely-perceptible green-cream so
   the cards still read as paper. Accent is moss (#5B7A5A) — botanical, not
   minty/clinical. Card-stripe matches the accent family. */
[data-palette="sage"] {
    --et-color-bg:            #F6F8F3;
    --et-color-surface-2:     #EEF2E7;
    --et-color-border:        #DDE4D2;
    --et-color-border-strong: #C5CFB6;
    --et-color-accent:        #5B7A5A;
    --et-color-card-stripe:   #6B8255;   /* warm moss, in-family with accent */
    /* Moss carries white at 4.8:1, so the start stop IS the accent. */
    --et-cta-shadow-rgb:      91, 122, 90;
    --et-cta-gradient:        linear-gradient(135deg, #5B7A5A 0%, #495F48 55%, #1F1F1F 100%);
    --et-cta-gradient-hover:  linear-gradient(135deg, #6C8B6B 0%, #5A7059 55%, #2F2F2F 100%);
}

/* ───────── Palette: Plum ─────────
   Deep aubergine accent on a warm-cream neutral rail. Home redesign (2026-06-29)
   warmed the neutrals (krémes off-white bg, beige-grey borders, slightly warmer
   ink-ramp) so the surface reads less lavender and more "modern paper".
   Plum is the app default palette as of this redesign. */
/* In Kassza the first selector below made plum the DEFAULT palette; in the
   starter slate holds that selector (see its block) and plum is one palette
   among the others. Kassza's reasoning for the selector, kept for the record:
   it applies when nothing has stamped [data-palette] (a first-time visitor, or
   any root the pre-paint script left alone because no preference was stored).
   Adding it to a palette block — instead of moving these values into :root —
   keeps Cream's ramp as the shared base, so the other palettes' partial
   overrides (6 vars each) go on inheriting exactly what they inherit today.

   The :where() is load-bearing, not decoration. It zeroes the specificity of
   its argument, leaving this selector at exactly (0,1,0) — the same weight as
   [data-palette="plum"] beside it, as :root above, and as [data-theme="dark"]
   below. Equal weight means source order decides, which is what we need in
   BOTH directions: these values beat the :root base (declared later) and lose
   to the dark base (declared later still). A plain :root:not([data-palette])
   would be (0,2,0) and outrank [data-theme="dark"], painting light surfaces
   for a first-time visitor in dark mode. */
[data-palette="plum"] {
    --et-color-bg:            #FAF8F3;
    --et-color-surface-2:     #F0EDE5;
    --et-color-border:        #ECE8DF;
    --et-color-border-strong: #D8D3CA;
    --et-color-ink:           #1A1917;
    --et-color-ink-2:         #6B6860;
    --et-color-ink-3:         #B0ADA5;
    --et-color-accent:        #7A4E7A;
    --et-color-owe:           #C4392D;   /* slight warm nudge from #C0392B */
    --et-color-card-stripe:   #8A5A88;   /* slightly brighter plum than accent */
    /* The original hand-tuned CTA, restated verbatim. It used to live in :root
       and therefore painted every palette; now it belongs to plum alone. The
       mid stop is the one value the recipe up top does not reproduce (it
       computes #5F405F — this #5B3E6E is bluer on purpose), so it is kept
       literally rather than recomputed: plum is the default palette and its
       pill must look exactly as it shipped. */
    --et-cta-shadow-rgb:      122, 78, 122;
    --et-cta-gradient:        linear-gradient(135deg, #7A4E7A 0%, #5B3E6E 55%, #1F1F1F 100%);
    --et-cta-gradient-hover:  linear-gradient(135deg, #8B5A8B 0%, #6C4E80 55%, #2F2F2F 100%);
}

/* ───────── Dark mode (cross-palette) ───────── */
[data-theme="dark"] {
    --et-color-bg:            #0F1012;
    --et-color-surface:       #1A1C1F;
    --et-color-surface-2:     #16181B;
    --et-color-border:        #2A2C30;
    --et-color-border-strong: #3A3C41;

    --et-color-ink:   #F2F1ED;
    --et-color-ink-2: #B6B3AA;
    --et-color-ink-3: #B6B3AA;
    --et-color-ink-4: #6F6E68;

    --et-color-owed:    #3FB07A;
    --et-color-owe:     #E5675A;
    --et-color-pend:    #E0A14A;
    --et-color-neutral: #8F8C83;
    --et-color-accent:  #5B86FF;

    /* Status backgrounds, dark mode */
    --et-status-bg-pending:   #3A2E12;
    --et-status-bg-sent:      #16234A;
    --et-status-bg-confirmed: #143821;
    --et-status-bg-paid:      #143821;
    --et-status-bg-logged:    #2A2826;
    --et-status-bg-cancelled: #2A2826;
    --et-status-bg-declined:  #2A2826;
    --et-status-bg-edited:    #2A2826;

    /* The D13 tokens' dark values. */
    --et-cta-ink:         #FFFFFF;
    --et-frame-bg:        #08090B;
    --et-panel-footer-bg: rgba(26, 28, 31, 0.92);
    --et-avatar-ring:     0 0 0 2px #1A1C1F, 0 0 0 3.5px #3A3C41;
}

[data-palette="cream"][data-theme="dark"] {
    --et-color-bg:            #15140F;
    --et-color-surface:       #1F1D17;
    --et-color-surface-2:     #1A1814;
    --et-color-border:        #2F2C24;
    --et-color-border-strong: #3F3C32;
}

/* (0,2,0) via the same :where() trick as slate's light block. */
:root:where(:not([data-palette]))[data-theme="dark"],
[data-palette="slate"][data-theme="dark"] {
    --et-color-bg:            #0F1217;
    --et-color-surface:       #181B20;
    --et-color-surface-2:     #15181C;
    --et-color-border:        #262A30;
    --et-color-border-strong: #363A40;
    --et-color-accent:        #7E8AFF;
    --et-color-ink-2:         #C4C7CC;
    --et-color-ink-3:         #8C9098;
}

[data-palette="coral"][data-theme="dark"] {
    --et-color-bg:            #1A100D;
    --et-color-surface:       #241813;
    --et-color-surface-2:     #1E140F;
    --et-color-border:        #3A2820;
    --et-color-border-strong: #4A3528;
    --et-color-accent:        #FFB0A4;
}

[data-palette="blue"][data-theme="dark"] {
    --et-color-bg:            #0F1A24;
    --et-color-surface:       #15212E;
    --et-color-surface-2:     #101A24;
    --et-color-border:        #243246;
    --et-color-border-strong: #344256;
    --et-color-accent:        #5BB0F0;
}

[data-palette="sage"][data-theme="dark"] {
    --et-color-bg:            #10130F;
    --et-color-surface:       #191D17;
    --et-color-surface-2:     #141812;
    --et-color-border:        #262C22;
    --et-color-border-strong: #363D32;
    --et-color-accent:        #8FB28E;
}

[data-palette="plum"][data-theme="dark"] {
    --et-color-bg:            #15101A;
    --et-color-surface:       #1E1722;
    --et-color-surface-2:     #18121D;
    --et-color-border:        #2D2532;
    --et-color-border-strong: #3D3543;
    --et-color-accent:        #B98FB6;
}

/* ───────── pilot toggle (temporary, removed once the owner decides) ─────────
   Owner request 2026-09-22, with a Wolt screenshot: on a phone the app header
   and the status-bar strip are the device's own white (black in dark), while
   every palette's --et-color-bg is a TINTED off-white (#FAF8F3 plum, #FFF6F2
   coral, #F4F8FC blue…), so "a different colour starts under the header".
   `data-bg-plain="plain"` swaps the page background alone for a pure
   #FFFFFF / #000000 so the shell and the page read as one surface, the way
   Wolt's app does.

   Only --et-color-bg moves. --et-color-surface is deliberately untouched: the
   point of the pilot is the page-vs-shell seam, not a re-tint of every card,
   and leaving surfaces alone is also what keeps this block one deletion when
   the pilot ends.

   ONE pair of rules covers every palette, because each palette sets
   --et-color-bg and nothing else reads its literal value. Specificity: the
   light rule is (0,1,1) — the attribute plus the `html` type — so it beats
   every palette block (0,1,0) AND the cross-palette dark base (0,1,0); the
   dark rule is (0,2,1) so it in turn beats the per-palette dark blocks
   (0,2,0). Both sit at the end of the file, after everything they override.

   Dark arrives only as [data-theme="dark"] in this project: ThemeService
   resolves the OS preference into that attribute (pre-paint-theme.js stamps
   it before the first frame), and tokens.css has no prefers-color-scheme
   branch of its own — so this one selector IS the system-dark path too. */
html[data-bg-plain="plain"] {
    --et-color-bg: #FFFFFF;
}

html[data-bg-plain="plain"][data-theme="dark"] {
    --et-color-bg: #000000;
}

/* Reduced motion (kept) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}