/**
 * FABURS DEFAULT THEME
 * Served by ThemeController/ThemeCssService as /default.css.
 * This file provides structural defaults; DB ColorScheme values are appended
 * at runtime and override the source variables below.
 * Version: 1.0.0
 */

:root {
    /* ═══════════════════════════════════════════════════════════════════════
       SOURCE VARIABLES — admin configures ONLY these via /admin/configuration
       ═══════════════════════════════════════════════════════════════════════ */

    /* === LIGHT MODE SOURCES === */
    --light-color-first:        #5B4B3E;
    --light-color-first-hover:  #44382E;
    --light-color-first-light:  #E7E2DC;
    --light-color-first-lighter:#F2F0ED;
    --light-color-second:       #282723;
    --light-color-second-hover: #414039;
    --light-color-second-light: #625F56;
    --light-color-third:        #E7E9DE;
    --light-color-success:      #4D6546;
    --light-color-warning:      #866218;
    --light-color-error:        #AD3F35;
    --light-bg-page:            #FFFFFF;
    --light-bg-surface:         #F6F6F5;
    --light-bg-surface-raised:  #FFFFFF;
    --light-bg-surface-sunken:  #EFEFED;
    --light-text-primary:       #282723;
    --light-text-secondary:     #5C5951;
    --light-text-tertiary:      #6A655B;
    --light-text-inverse:       #FFFFFF;
    --light-image-overlay-text: #ffffff;
    --light-border-default:     #DFDEDB;
    --light-border-strong:      #B8B5AF;
    --light-input-bg:           #ffffff;
    --light-input-border:       #8E897E;
    --light-card-bg:            #FFFFFF;
    --light-card-border:        var(--light-border-default);
    /* Warm-tinted shadow — admin configurable via ColorScheme.lightShadowColor/Opacity.
       RGB tuple is used with rgb(var(--shadow-color-rgb) / var(--shadow-opacity))
       so all shadow sizes inherit the warm tint from a single source. */
    --light-shadow-color-rgb:   40 39 35;
    --light-shadow-opacity:     0.06;
    --light-bg-modal:           #FFFFFF;
    --light-bg-secondary:       #F6F6F5;
    /* Modal overlay — the dim behind modals. Admin-configurable via ColorScheme.
       Use rgb() syntax with a variable tuple so opacity can be tuned independently. */
    --light-overlay-color-rgb:  40 39 35;
    --light-overlay-opacity:    0.48;
    --light-bg-overlay:         rgb(var(--light-overlay-color-rgb) / var(--light-overlay-opacity));
    --light-bg-overlay-blur:    0px;
    --light-navbar-bg:          #FFFFFF;
    --light-btn-primary-bg:     #5B4B3E;
    --light-btn-primary-text:   #FFFFFF;
    --light-btn-secondary-bg:   #FFFFFF;
    --light-btn-secondary-text: #282723;
    --light-skeleton-bg:        #E6E5E2;
    --light-skeleton-shine:     #F6F6F5;
    --light-gray-50:  #f8f9fa;  --light-gray-100: #f1f3f5;
    --light-gray-200: #e9ecef;  --light-gray-300: #dee2e6;
    --light-gray-400: #ced4da;  --light-gray-500: #adb5bd;
    --light-gray-600: #6c757d;  --light-gray-700: #495057;
    --light-gray-800: #343a40;  --light-gray-900: #212529;

    /* === DARK MODE SOURCES === */
    --dark-color-first:         #C3B09A;
    --dark-color-first-hover:   #D6C6B3;
    --dark-color-first-light:   #494037;
    --dark-color-first-lighter: #332E28;
    --dark-color-second:        #F0ECE2;
    --dark-color-second-hover:  #FFFFFF;
    --dark-color-second-light:  #C1BAAD;
    --dark-color-third:         #30382D;
    --dark-color-success:       #A4B594;
    --dark-color-warning:       #DEC180;
    --dark-color-error:         #F09E91;
    --dark-bg-page:             #1D1E1B;
    --dark-bg-surface:          #2A2B26;
    --dark-bg-surface-raised:   #32332D;
    --dark-bg-surface-sunken:   #171815;
    --dark-text-primary:        #F0ECE2;
    --dark-text-secondary:      #C1BAAD;
    --dark-text-tertiary:       #AAA496;
    --dark-text-inverse:        #1D1E1B;
    --dark-image-overlay-text:  #ffffff;
    --dark-border-default:      #414239;
    --dark-border-strong:       #616357;
    --dark-input-bg:            #20211D;
    --dark-input-border:        #858779;
    --dark-card-bg:             #252622;
    --dark-card-border:         #2D2822;
    --dark-shadow-color-rgb:    0 0 0;
    --dark-shadow-opacity:      0.28;
    --dark-bg-modal:            #292A25;
    --dark-bg-secondary:        #24251F;
    --dark-overlay-color-rgb:   0 0 0;
    --dark-overlay-opacity:     0.64;
    --dark-bg-overlay:          rgb(var(--dark-overlay-color-rgb) / var(--dark-overlay-opacity));
    --dark-bg-overlay-blur:     0px;
    --dark-navbar-bg:           #1D1E1B;
    --dark-btn-primary-bg:      #C3B09A;
    --dark-btn-primary-text:    #1D1E1B;
    --dark-btn-secondary-bg:    #2A2B26;
    --dark-btn-secondary-text:  #F0ECE2;
    --dark-footer-bg:           var(--dark-color-second);
    --dark-skeleton-bg:         #34362F;
    --dark-skeleton-shine:      #44473C;
    --dark-gray-50:  #1a1d27;   --dark-gray-100: #242736;
    --dark-gray-200: #2d3140;   --dark-gray-300: #3a3f50;
    --dark-gray-400: #6c7078;   --dark-gray-500: #8b8f96;
    --dark-gray-600: #b0b3b8;   --dark-gray-700: #d1d4d8;
    --dark-gray-800: #e4e6eb;   --dark-gray-900: #f0f2f5;

    /* ═══════════════════════════════════════════════════════════════════════
       LIVE VARIABLES — derived from active mode, used everywhere in CSS
       Default: light mode. Dark mode blocks reassign from --dark-* sources.
       ═══════════════════════════════════════════════════════════════════════ */
    --color-first:        var(--light-color-first);
    --color-first-hover:  var(--light-color-first-hover);
    --color-first-light:  var(--light-color-first-light);
    --color-first-lighter:var(--light-color-first-lighter);
    --color-second:       var(--light-color-second);
    --color-second-hover: var(--light-color-second-hover);
    --color-second-light: var(--light-color-second-light);
    --color-third:        var(--light-color-third);
    --color-success:      var(--light-color-success);
    --color-warning:      var(--light-color-warning);
    --color-error:        var(--light-color-error);
    --ios-error-tint: var(--color-first-lighter);
    --ios-success-tint: var(--color-first-lighter);
    --ios-warning-tint: var(--color-first-lighter);
    --ios-brand-tint:     var(--color-first-lighter);
    --ios-second-tint: var(--color-first-lighter);
    /* Rating stars: the amber warning tone is only ~2.1:1 on the cream page,
       under WCAG 1.4.11's 3:1 for a meaningful graphic. Darkened here to
       ~3.9:1 on --bg-page, ~4.4:1 on white, ~3.6:1 on --bg-surface-sunken.
       Dark mode resets it to the raw amber (~6.8:1 on the dark page). */
    --color-star:         var(--color-warning);
    --bg-page:            var(--light-bg-page);
    --bg-surface:         var(--light-bg-surface);
    --bg-surface-raised:  var(--light-bg-surface-raised);
    --bg-surface-sunken:  var(--light-bg-surface-sunken);
    --bg-overlay:         rgba(0, 0, 0, 0.5);
    --text-primary:       var(--light-text-primary);
    --text-secondary:     var(--light-text-secondary);
    --text-tertiary:      var(--light-text-tertiary);
    --text-inverse:       var(--light-text-inverse);
    --color-image-overlay-text: var(--light-image-overlay-text);
    --border-default:     var(--light-border-default);
    --border-strong:      var(--light-border-strong);
    --input-bg:           var(--light-input-bg);
    --input-border:       var(--light-input-border);
    --card-bg:            var(--light-card-bg);
    --card-border:        var(--light-card-border);
    /* Shadow system — all shadows derive from one warm-tinted RGB tuple + opacity.
       Admins set the color/opacity via /admin/configuration; CSS computes the
       per-size shadows via rgb(var(--shadow-color-rgb) / var(--shadow-opacity)). */
    --shadow-color-rgb:   var(--light-shadow-color-rgb);
    --shadow-opacity:     var(--light-shadow-opacity);
    --card-shadow:        0 1px 3px rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
                          0 1px 2px rgb(var(--shadow-color-rgb) / calc(var(--shadow-opacity) * 0.6));
    --bg-modal:           var(--light-bg-modal);
    --bg-secondary:       var(--light-bg-secondary);
    --bg-overlay:         var(--light-bg-overlay);
    --bg-overlay-blur:    var(--light-bg-overlay-blur);
    --navbar-bg:          var(--light-navbar-bg);
    --footer-bg:          var(--color-second);
    --btn-primary-bg:     var(--light-btn-primary-bg);
    --btn-primary-text:   var(--light-btn-primary-text);
    --btn-secondary-bg:   var(--light-btn-secondary-bg);
    --btn-secondary-text: var(--light-btn-secondary-text);
    --skeleton-bg:        var(--light-skeleton-bg);
    --skeleton-shine:     var(--light-skeleton-shine);
    --gray-50:  var(--light-gray-50);   --gray-100: var(--light-gray-100);
    --gray-200: var(--light-gray-200);  --gray-300: var(--light-gray-300);
    --gray-400: var(--light-gray-400);  --gray-500: var(--light-gray-500);
    --gray-600: var(--light-gray-600);  --gray-700: var(--light-gray-700);
    --gray-800: var(--light-gray-800);  --gray-900: var(--light-gray-900);

    /* === TYPOGRAPHY (mode-independent) === */
    --fab-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --fab-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fab-font-heading-jp: 'Shippori Mincho', 'Yu Mincho', serif;
    --fab-font-body-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --fab-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* Type scale */
    --fab-text-xs:   0.75rem;
    --fab-text-sm:   0.875rem;
    --fab-text-base: 1rem;
    --fab-text-lg:   1.125rem;
    --fab-text-xl:   1.375rem;
    --fab-text-2xl:  1.75rem;
    --fab-text-3xl:  2.25rem;
    --fab-text-4xl:  3rem;

    /* Line heights */
    --fab-leading-tight:   1.2;
    --fab-leading-normal:  1.6;
    --fab-leading-relaxed: 1.8;
    --fab-leading-jp:      1.8;

    /* Touch targets (WCAG 2.5.8 — 44px minimum for mobile) */
    --touch-target-min: 2.75rem;

    /* === CTA DARK (mode-independent) ===
       A fixed near-black accent for high-contrast CTAs (e.g. Add to Cart)
       that should look the same regardless of light/dark mode — unlike
       --text-primary/--text-inverse, which intentionally flip per theme. */
    --color-cta-dark:       #1a1714;
    --color-cta-dark-hover: #2E2822;
    --color-cta-dark-text:  #FFF8F0;

    /* Letter spacing */
    --fab-tracking-tight:  -0.01em;
    --fab-tracking-normal:  0;
    --fab-tracking-wide:    0.04em;

    /* === SPACING ===
       8px base grid — prefer sm/md/lg/xl. xs=4px is a pragmatic half-step for
       tight spacing (icon padding, inline gaps) and is retained to avoid
       breaking existing usages. */
    --spacing-xs: 0.25rem;   /* 4px — half-step */
    --spacing-sm: 0.5rem;    /* 8px — base unit */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */

    /* === BORDER RADIUS === */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.375rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* === SHADOWS ===
       All shadow sizes derive from --shadow-color-rgb + --shadow-opacity
       (set above in the live vars block). Changing those two values
       retints the entire shadow scale, enabling warm-tinted shadows
       for the Faburs brand. */
    --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color-rgb) / calc(var(--shadow-opacity) * 0.6));
    --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
                 0 2px 4px -2px rgb(var(--shadow-color-rgb) / calc(var(--shadow-opacity) * 0.6));
    --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color-rgb) / calc(var(--shadow-opacity) * 1.3)),
                 0 4px 6px -4px rgb(var(--shadow-color-rgb) / var(--shadow-opacity));
    --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color-rgb) / calc(var(--shadow-opacity) * 1.5)),
                 0 8px 10px -6px rgb(var(--shadow-color-rgb) / var(--shadow-opacity));

    /* === TRANSITIONS ===
       Standardized on cubic-bezier(0.25, 0.1, 0.25, 1) ("ease") for a
       smooth, natural feel across all UI interactions. */
    --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-base: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-slow: 300ms cubic-bezier(0.25, 0.1, 0.25, 1);

    color-scheme: light dark;
}

@supports (background: color-mix(in srgb, red 10%, white)) {

    :root {
    --color-star:         color-mix(in srgb, var(--color-warning) 72%, #000);
    }
}

/* Force light-mode native form controls when data-theme=light is set */
[data-theme="light"] {
    color-scheme: light;
}

/* Force dark-mode native form controls when data-theme=dark is set — without
   this, manually toggling dark mode on a light-OS/browser leaves native
   inputs/selects rendering with a white UA background (their forced
   --text-primary text color goes near-white too, making the two invisible
   against each other) since `color-scheme: light dark` alone defers to the
   OS/browser preference, not this app's own theme toggle. */
[data-theme="dark"] {
    color-scheme: dark;
}

/* === DARK MODE (auto from browser) — reassign live vars from --dark-* === */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-first:        var(--dark-color-first);
        --color-first-hover:  var(--dark-color-first-hover);
        --color-first-light:  var(--dark-color-first-light);
        --color-first-lighter:var(--dark-color-first-lighter);
        --color-second:       var(--dark-color-second);
        --color-second-hover: var(--dark-color-second-hover);
        --color-second-light: var(--dark-color-second-light);
        --color-third:        var(--dark-color-third);
        --color-success:      var(--dark-color-success);
        --color-warning:      var(--dark-color-warning);
        --color-star:         var(--color-warning);
        --color-error:        var(--dark-color-error);
        --ios-error-tint: var(--color-first-lighter);
        --ios-success-tint: var(--color-first-lighter);
        --ios-warning-tint: var(--color-first-lighter);
        --ios-brand-tint: var(--dark-color-first-lighter);
        --ios-second-tint: var(--color-first-lighter);
        --bg-page:            var(--dark-bg-page);
        --bg-surface:         var(--dark-bg-surface);
        --bg-surface-raised:  var(--dark-bg-surface-raised);
        --bg-surface-sunken:  var(--dark-bg-surface-sunken);
        --bg-overlay:         rgba(0, 0, 0, 0.7);
        --text-primary:       var(--dark-text-primary);
        --text-secondary:     var(--dark-text-secondary);
        --text-tertiary:      var(--dark-text-tertiary);
        --text-inverse:       var(--dark-text-inverse);
        --color-image-overlay-text: var(--dark-image-overlay-text);
        --border-default:     var(--dark-border-default);
        --border-strong:      var(--dark-border-strong);
        --input-bg:           var(--dark-input-bg);
        --input-border:       var(--dark-input-border);
        --card-bg:            var(--dark-card-bg);
        --card-border:        var(--dark-card-border);
        --shadow-color-rgb:   var(--dark-shadow-color-rgb);
        --shadow-opacity:     var(--dark-shadow-opacity);
        --card-shadow:        0 1px 3px rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
                              0 1px 2px rgb(var(--shadow-color-rgb) / calc(var(--shadow-opacity) * 0.6));
        --bg-modal:           var(--dark-bg-modal);
        --bg-secondary:       var(--dark-bg-secondary);
        --bg-overlay:         var(--dark-bg-overlay);
        --bg-overlay-blur:    var(--dark-bg-overlay-blur);
        --navbar-bg:          var(--dark-navbar-bg);
        --footer-bg:          var(--dark-footer-bg);
        --btn-primary-bg:     var(--dark-btn-primary-bg);
        --btn-primary-text:   var(--dark-btn-primary-text);
        --btn-secondary-bg:   var(--dark-btn-secondary-bg);
        --btn-secondary-text: var(--dark-btn-secondary-text);
        --skeleton-bg:        var(--dark-skeleton-bg);
        --skeleton-shine:     var(--dark-skeleton-shine);
        --gray-50:  var(--dark-gray-50);   --gray-100: var(--dark-gray-100);
        --gray-200: var(--dark-gray-200);  --gray-300: var(--dark-gray-300);
        --gray-400: var(--dark-gray-400);  --gray-500: var(--dark-gray-500);
        --gray-600: var(--dark-gray-600);  --gray-700: var(--dark-gray-700);
        --gray-800: var(--dark-gray-800);  --gray-900: var(--dark-gray-900);
    }
}

/* === MANUAL DARK OVERRIDE (toggle button) — identical reassignment === */
[data-theme="dark"] {
    --color-first:        var(--dark-color-first);
    --color-first-hover:  var(--dark-color-first-hover);
    --color-first-light:  var(--dark-color-first-light);
    --color-first-lighter:var(--dark-color-first-lighter);
    --color-second:       var(--dark-color-second);
    --color-second-hover: var(--dark-color-second-hover);
    --color-second-light: var(--dark-color-second-light);
    --color-third:        var(--dark-color-third);
    --color-success:      var(--dark-color-success);
    --color-warning:      var(--dark-color-warning);
    --color-star:         var(--color-warning);
    --color-error:       var(--dark-color-error);
    --ios-error-tint: var(--color-first-lighter);
    --ios-success-tint: var(--color-first-lighter);
    --ios-warning-tint: var(--color-first-lighter);
    --ios-brand-tint: var(--dark-color-first-lighter);
    --ios-second-tint: var(--color-first-lighter);
    --bg-page:           var(--dark-bg-page);
    --bg-surface:        var(--dark-bg-surface);
    --bg-surface-raised: var(--dark-bg-surface-raised);
    --bg-surface-sunken: var(--dark-bg-surface-sunken);
    --bg-overlay:        var(--dark-bg-overlay);
    --bg-overlay-blur:   var(--dark-bg-overlay-blur);
    --text-primary:      var(--dark-text-primary);
    --text-secondary:    var(--dark-text-secondary);
    --text-tertiary:     var(--dark-text-tertiary);
    --text-inverse:      var(--dark-text-inverse);
    --color-image-overlay-text: var(--dark-image-overlay-text);
    --border-default:    var(--dark-border-default);
    --border-strong:     var(--dark-border-strong);
    --input-bg:          var(--dark-input-bg);
    --input-border:      var(--dark-input-border);
    --card-bg:           var(--dark-card-bg);
    --card-border:       var(--dark-card-border);
    --shadow-color-rgb:  var(--dark-shadow-color-rgb);
    --shadow-opacity:    var(--dark-shadow-opacity);
    --card-shadow:       0 1px 3px rgb(var(--shadow-color-rgb) / var(--shadow-opacity)),
                         0 1px 2px rgb(var(--shadow-color-rgb) / calc(var(--shadow-opacity) * 0.6));
    --bg-modal:          var(--dark-bg-modal);
    --bg-secondary:      var(--dark-bg-secondary);
    --navbar-bg:         var(--dark-navbar-bg);
    --footer-bg:         var(--dark-footer-bg);
    --btn-primary-bg:    var(--dark-btn-primary-bg);
    --btn-primary-text:  var(--dark-btn-primary-text);
    --btn-secondary-bg:  var(--dark-btn-secondary-bg);
    --btn-secondary-text:var(--dark-btn-secondary-text);
    --skeleton-bg:       var(--dark-skeleton-bg);
    --skeleton-shine:    var(--dark-skeleton-shine);
    --gray-50:  var(--dark-gray-50);   --gray-100: var(--dark-gray-100);
    --gray-200: var(--dark-gray-200);  --gray-300: var(--dark-gray-300);
    --gray-400: var(--dark-gray-400);  --gray-500: var(--dark-gray-500);
    --gray-600: var(--dark-gray-600);  --gray-700: var(--dark-gray-700);
    --gray-800: var(--dark-gray-800);  --gray-900: var(--dark-gray-900);
}

/* === APPLY SEMANTIC TOKENS TO BASE ELEMENTS === */
html {
    background: var(--bg-page);
    color: var(--text-primary);
}

body {
    background: var(--bg-page);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   TAILWIND → DESIGN SYSTEM TOKEN BRIDGE
   Maps Tailwind color utilities to admin-configurable CSS variables.
   Runs in BOTH light and dark mode so admin changes flow everywhere.
   Defaults match Tailwind's palette exactly — no visual shift unless
   the admin customizes colors via /admin/configuration.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Text colors ────────────────────────────────────────────────────── */
.text-gray-900, .text-gray-800      { color: var(--text-primary)   !important; }
.text-gray-700, .text-gray-600      { color: var(--text-secondary) !important; }
.text-gray-500, .text-gray-400      { color: var(--text-tertiary)  !important; }
.text-black                         { color: var(--text-primary)   !important; }

/* ── Background surfaces ────────────────────────────────────────────── */
.bg-white                           { background-color: var(--card-bg)           !important; }
.bg-gray-50                         { background-color: var(--bg-surface-raised) !important; }
.bg-gray-100                        { background-color: var(--bg-surface-raised) !important; }
.bg-gray-200                        { background-color: var(--bg-surface-sunken) !important; }
.bg-white\/95, .bg-white\/90, .bg-white\/80 { background-color: var(--card-bg) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .bg-white\/95, .bg-white\/90, .bg-white\/80 { background-color: color-mix(in srgb, var(--card-bg) 95%, transparent) !important;
    }
}

/* ── Borders ────────────────────────────────────────────────────────── */
.border-gray-50, .border-gray-100, .border-gray-200
                                    { border-color: var(--border-default) !important; }
.border-gray-300                    { border-color: var(--border-strong)  !important; }

/* ── Form controls ──────────────────────────────────────────────────── */
/* Checkboxes/radios are excluded: this blanket !important background froze a
   CHECKED checkbox white (with its white SVG checkmark — invisible), so the
   toggle looked dead. Their themed styling lives in main.css @layer base. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    color:            var(--text-primary) !important;
    border-color:     var(--input-border) !important;
}

/* The :not():not() above outranks a plain .color-*-border class even though both
   are !important (equal !important tier falls back to specificity, and two :not()
   clauses beat one class). Restate the border color scoped to form controls so the
   utility classes still win when applied to an <input>/<select>/<textarea>. */
input:not([type="checkbox"]):not([type="radio"]).color-first-border, select.color-first-border, textarea.color-first-border     { border-color: var(--color-first)   !important; }
input:not([type="checkbox"]):not([type="radio"]).color-second-border, select.color-second-border, textarea.color-second-border   { border-color: var(--color-second)  !important; }
input:not([type="checkbox"]):not([type="radio"]).color-third-border, select.color-third-border, textarea.color-third-border     { border-color: var(--color-third)   !important; }
input:not([type="checkbox"]):not([type="radio"]).color-warning-border, select.color-warning-border, textarea.color-warning-border { border-color: var(--color-warning) !important; }
input:not([type="checkbox"]):not([type="radio"]).color-success-border, select.color-success-border, textarea.color-success-border { border-color: var(--color-success) !important; }
input:not([type="checkbox"]):not([type="radio"]).color-error-border, select.color-error-border, textarea.color-error-border     { border-color: var(--color-error)   !important; }

/* Autofilled inputs (browser-saved address/name/etc.) get their background
   painted by an internal UA mechanism that plain background-color/bg-* CSS
   can't override — only :-webkit-autofill + an inset box-shadow can. Without
   this, any autofilled field (Add Address modal, login, etc.) flashes the
   browser's native pale autofill color, clashing with dark mode exactly like
   the earlier white-on-white input bug. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-page) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-page) inset !important;
    caret-color: var(--text-primary);
    transition: background-color 600000s ease-in-out 0s;
}

/* ── Status colors (error / success / warning) ──────────────────────── */
.text-red-500, .text-red-600, .text-red-700, .text-red-800
                                    { color: var(--color-error)   !important; }
.text-green-600, .text-green-700, .text-green-800
                                    { color: var(--color-success) !important; }
.text-yellow-600, .text-yellow-700, .text-yellow-800
                                    { color: var(--color-warning) !important; }
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800,
.text-indigo-500, .text-indigo-600, .text-indigo-700,
.text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800
                                    { color: var(--color-first) !important; }
.text-amber-600, .text-amber-700, .text-amber-800,
.text-orange-500, .text-orange-600, .text-orange-700
                                    { color: var(--color-warning) !important; }
.text-pink-500, .text-pink-600     { color: var(--color-error) !important; }
.text-emerald-500, .text-emerald-600
                                    { color: var(--color-success) !important; }

.bg-red-50, .bg-red-100             { background-color: var(--ios-error-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }

@supports (background: color-mix(in srgb, red 10%, white)) {

    .bg-red-50, .bg-red-100 { background-color: color-mix(in srgb, var(--color-error)   15%, var(--card-bg)) !important;
    }
}
.bg-green-50, .bg-green-100         { background-color: var(--ios-success-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .bg-green-50, .bg-green-100 { background-color: color-mix(in srgb, var(--color-success) 15%, var(--card-bg)) !important;
    }
}
.bg-yellow-50, .bg-yellow-100       { background-color: var(--ios-warning-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .bg-yellow-50, .bg-yellow-100 { background-color: color-mix(in srgb, var(--color-warning) 15%, var(--card-bg)) !important;
    }
}
.bg-blue-50, .bg-blue-100, .bg-blue-200,
.bg-indigo-50, .bg-indigo-100, .bg-indigo-50\/40,
.bg-purple-50, .bg-purple-100      { background-color: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .bg-blue-50, .bg-blue-100, .bg-blue-200,
.bg-indigo-50, .bg-indigo-100, .bg-indigo-50\/40,
.bg-purple-50, .bg-purple-100 { background-color: color-mix(in srgb, var(--color-first) 12%, var(--card-bg)) !important;
    }
}
.bg-amber-50, .bg-amber-100        { background-color: var(--ios-warning-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .bg-amber-50, .bg-amber-100 { background-color: color-mix(in srgb, var(--color-warning) 15%, var(--card-bg)) !important;
    }
}
.bg-blue-500, .bg-blue-600,
.bg-indigo-500, .bg-indigo-600,
.bg-purple-500                    { background-color: var(--color-first) !important; }
.bg-red-500, .bg-red-600, .bg-pink-500
                                   { background-color: var(--color-error) !important; }
.bg-green-500, .bg-green-600,
.bg-emerald-500, .bg-emerald-600   { background-color: var(--color-success) !important; }
.bg-amber-500, .bg-amber-600,
.bg-orange-500, .bg-orange-600     { background-color: var(--color-warning) !important; }

/* ── Secondary/muted backgrounds ────────────────────────────────────── */
.bg-gray-50\/60, .bg-gray-100\/60  { background-color: var(--bg-secondary) !important; }

/* ── Hover states ───────────────────────────────────────────────────── */
.hover\:bg-gray-100:hover           { background-color: var(--bg-surface-raised) !important; }
.hover\:bg-gray-50:hover            { background-color: var(--bg-secondary)      !important; }
.hover\:bg-gray-200:hover           { background-color: var(--bg-surface-sunken) !important; }
.hover\:text-gray-900:hover,
.hover\:text-gray-800:hover,
.hover\:text-gray-700:hover         { color: var(--text-primary) !important; }
.hover\:text-gray-600:hover,
.hover\:text-gray-500:hover         { color: var(--text-secondary) !important; }
.hover\:border-gray-300:hover,
.hover\:border-gray-200:hover       { border-color: var(--border-strong) !important; }
.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover         { background-color: var(--color-first-hover) !important; }
.hover\:bg-indigo-50:hover,
.hover\:bg-blue-50:hover            { background-color: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .hover\:bg-indigo-50:hover,
.hover\:bg-blue-50:hover { background-color: color-mix(in srgb, var(--color-first) 12%, var(--card-bg)) !important;
    }
}
.hover\:text-indigo-600:hover,
.hover\:text-blue-600:hover         { color: var(--color-first) !important; }
.hover\:border-indigo-300:hover,
.hover\:border-indigo-500:hover     { border-color: var(--color-first) !important; }

/* ── Focus/ring states ───────────────────────────────────────────────── */
.focus\:ring-blue-500:focus,
.focus\:ring-indigo-500:focus,
.ring-blue-500,
.ring-indigo-500                    { --tw-ring-color: var(--color-first) !important; }
.focus\:border-blue-500:focus,
.focus\:border-indigo-500:focus,
.border-blue-500,
.border-indigo-500,
.border-indigo-600                  { border-color: var(--color-first) !important; }
.border-amber-100, .border-amber-200 { border-color: var(--color-warning) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .border-amber-100, .border-amber-200 { border-color: color-mix(in srgb, var(--color-warning) 35%, var(--border-default)) !important;
    }
}

/* ── Gradient stops ──────────────────────────────────────────────────── */
.from-blue-500, .from-indigo-500, .from-purple-500
                                    { --tw-gradient-from: var(--color-first) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .from-blue-500, .from-indigo-500, .from-purple-500 { --tw-gradient-to: color-mix(in srgb, var(--color-first) 0%, transparent) var(--tw-gradient-to-position) !important;
    }
}
.from-red-500, .from-pink-500       { --tw-gradient-from: var(--color-error) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .from-red-500, .from-pink-500 { --tw-gradient-to: color-mix(in srgb, var(--color-error) 0%, transparent) var(--tw-gradient-to-position) !important;
    }
}
.from-stone-100                     { --tw-gradient-from: var(--bg-surface-raised) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .from-stone-100 { --tw-gradient-to: color-mix(in srgb, var(--bg-surface-raised) 0%, transparent) var(--tw-gradient-to-position) !important;
    }
}
.to-blue-500, .to-indigo-500, .to-purple-500, .to-purple-50
                                    { --tw-gradient-to: var(--color-first) var(--tw-gradient-to-position) !important; }
.to-pink-500, .to-red-500           { --tw-gradient-to: var(--color-error) var(--tw-gradient-to-position) !important; }
.to-orange-600, .to-amber-500       { --tw-gradient-to: var(--color-warning) var(--tw-gradient-to-position) !important; }
.to-stone-50                        { --tw-gradient-to: var(--bg-surface-raised) var(--tw-gradient-to-position) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   BRIDGE EXTENSIONS (site-wide color audit 2026-06-28)
   Off-bridge Tailwind utilities found across pages/Vue not covered above.
   Same light+dark, admin-configurable contract as the bridge proper.
   These are the genuinely-missing shades only — do NOT re-add anything
   already mapped in the bridge above (gray-400 text, gray-300 border,
   ring/border blue+indigo-500, hover:border-indigo-300, amber-100/200…).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Uncommon neutral shade: gray-300 text (below the bridged gray-400 floor).
   breadcrumb chevrons, empty-star/heart placeholders, empty-state icons. ── */
.text-gray-300                      { color: var(--text-tertiary) !important; }

/* ── Neutral surfaces & borders at 300/400 (bridge stops at 200/300).
   disabled-button fills, avatar fallbacks, loading scrims, admin form borders ── */
.bg-gray-300                        { background-color: var(--bg-surface-sunken) !important; }
.bg-gray-400                        { background-color: var(--border-strong)     !important; }
.hover\:bg-gray-300:hover           { background-color: var(--bg-surface-sunken) !important; }
.border-gray-400                    { border-color: var(--border-strong) !important; }
.hover\:border-gray-400:hover,
.focus\:border-gray-400:focus       { border-color: var(--border-strong) !important; }

/* ── Divide colors (divide-* is separate from border-*; entirely unbridged) ── */
.divide-gray-50  > * + *,
.divide-gray-100 > * + *            { border-color: var(--border-default) !important; }
.divide-gray-200 > * + *            { border-color: var(--border-strong)  !important; }

/* ── Status/semantic rings + ring offset (brand rings already bridged above) ── */
.ring-green-300, .focus\:ring-green-300:focus { --tw-ring-color: var(--color-success) !important; }
.ring-red-300,   .focus\:ring-red-300:focus,
.focus\:ring-red-400:focus                     { --tw-ring-color: var(--color-error)   !important; }
.ring-offset-white                             { --tw-ring-offset-color: var(--card-bg) !important; }

/* ── Native form-control accent (checkbox/radio/range tint) ── */
.accent-gray-500, .accent-blue-500, .accent-indigo-500
                                    { accent-color: var(--color-first) !important; }

/* ── sky-* family (used as an info/brand accent on the product shipping card) ── */
.text-sky-600, .text-sky-700       { color: var(--color-first-hover) !important; }
.bg-sky-50                          { background-color: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .bg-sky-50 { background-color: color-mix(in srgb, var(--color-first) 12%, var(--card-bg)) !important;
    }
}
.bg-sky-600                         { background-color: var(--color-first) !important; }
.border-sky-100                     { border-color: var(--color-first) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .border-sky-100 { border-color: color-mix(in srgb, var(--color-first) 20%, var(--card-bg)) !important;
    }
}

/* ── Semantic borders at 300/400 (bridge had 100/200 amber, 500/600 indigo only) ── */
.border-indigo-300, .border-indigo-400,
.hover\:border-indigo-400:hover    { border-color: var(--color-first-light) !important; }
.border-red-400, .border-red-300,
.hover\:border-red-300:hover       { border-color: var(--color-error)   !important; }
.border-green-300,
.hover\:border-green-300:hover     { border-color: var(--color-success) !important; }
.border-amber-300                   { border-color: var(--color-warning) !important; }

/* ── Semantic text/bg at the 300/400 shade + hover:text-red variants ── */
.text-red-300, .text-red-400       { color: var(--color-error)   !important; }
.text-green-300                     { color: var(--color-success) !important; }
.bg-green-400                       { background-color: var(--color-success) !important; }
.hover\:text-red-500:hover,
.hover\:text-red-600:hover,
.hover\:text-red-700:hover,
.hover\:text-red-800:hover         { color: var(--color-error) !important; }

/* ── bg-blue-300 (admin internal tooling) ── */
.bg-blue-300                        { background-color: var(--color-first-light) !important; }

/* Named hover utilities for new UI. Prefer these over Tailwind gray hovers. */
.faburs-hover-surface:hover {
    background-color: var(--bg-surface-raised) !important;
}
.faburs-hover-muted:hover {
    background-color: var(--bg-secondary) !important;
}
.faburs-hover-text:hover {
    color: var(--text-primary) !important;
}
.faburs-hover-border:hover {
    border-color: var(--color-first) !important;
}
.faburs-hover-brand:hover {
    color: var(--color-first) !important;
    background-color: var(--color-first-lighter) !important;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .faburs-hover-brand:hover {
        background-color: color-mix(in srgb, var(--color-first) 8%, transparent) !important;
    }
}

/* ── Shadows — use warm-tinted shadow color from admin config ──────── */
.shadow-sm, .shadow-md, .shadow-lg  { --tw-shadow-color: rgb(var(--shadow-color-rgb) / var(--shadow-opacity)); }

/* ── Component overrides ────────────────────────────────────────────── */
.main-content                       { color: var(--text-primary); }
a                                   { color: inherit; }
.product-card                       { background: var(--card-bg) !important; border-color: var(--border-default) !important; }
.product-card__title                { color: var(--text-primary)   !important; }
.category-card                      { background: var(--card-bg) !important; border-color: var(--border-default) !important; }
.category-card__title               { color: var(--text-secondary) !important; }

/* ── Navbar — uses --navbar-bg for admin-configurable background ───── */
[role="navigation"] > .backdrop-blur-md,
[role="navigation"] > .hidden.md\:block { background-color: var(--navbar-bg) !important; }

/* NOTE: Button styling lives in main.css (FABURS COMPONENT SYSTEM — BUTTONS),
   which reads the admin tokens --btn-primary-bg/--btn-primary-text/
   --btn-secondary-bg/--btn-secondary-text directly. The old !important
   override block (and its [style*="background:var(--color-first)"]
   attribute-substring hack) was removed — inline-styled elements keep
   theming through --color-first itself. */

/* Dark mode: override body gradient and pseudo-element blobs */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background: var(--bg-page) !important;
    }
    :root:not([data-theme="light"]) body::before,
    :root:not([data-theme="light"]) body::after {
        display: none !important;
    }
    :root:not([data-theme="light"]) img:not([data-no-dim]) {
        filter: brightness(0.9);
    }
}
[data-theme="dark"] body {
    background: var(--bg-page) !important;
}
[data-theme="dark"] body::before,
[data-theme="dark"] body::after {
    display: none !important;
}
[data-theme="dark"] img:not([data-no-dim]) {
    filter: brightness(0.9);
}

/* NOTE: All Tailwind→token remapping is now in the global bridge above.
   These duplicate dark-mode-only blocks have been consolidated there. */

/* === COLOR UTILITY CLASSES === */
.color-first { color: var(--color-first) !important; }
.color-first-hover:hover { color: var(--color-first-hover) !important; }
.color-second { color: var(--color-second) !important; }
.color-third { color: var(--color-third) !important; }
.color-success { color: var(--color-success) !important; }
.color-warning { color: var(--color-warning) !important; }
.color-error { color: var(--color-error) !important; }

.color-first-bg { background-color: var(--color-first) !important; }
.color-second-bg { background-color: var(--color-second) !important; }
.color-third-bg { background-color: var(--color-third) !important; }
.color-success-bg { background-color: var(--color-success) !important; }
.color-warning-bg { background-color: var(--color-warning) !important; }
.color-error-bg { background-color: var(--color-error) !important; }

.color-first-border { border-color: var(--color-first) !important; }
.color-first-light-border { border-color: var(--color-first) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .color-first-light-border { border-color: color-mix(in srgb, var(--color-first) 30%, var(--border-default)) !important;
    }
}
.color-first-top-border { border-top-color: var(--color-first) !important; }
.color-second-border { border-color: var(--color-second) !important; }
.color-third-border { border-color: var(--color-third) !important; }

/* Neutral surface / border utilities (parallel to color-first-bg/-border above) */
.color-card-bg           { background-color: var(--card-bg) !important; }
.color-surface-raised-bg { background-color: var(--bg-surface-raised) !important; }
.color-surface-sunken-bg { background-color: var(--bg-surface-sunken) !important; }
.color-page-bg           { background-color: var(--bg-page) !important; }
.color-border-default    { border-color: var(--border-default) !important; }
.color-border-strong     { border-color: var(--border-strong) !important; }
.color-first-accent      { accent-color: var(--color-first) !important; }

.color-cta-dark { color: var(--color-cta-dark) !important; }
.color-cta-dark-bg { background-color: var(--color-cta-dark) !important; }
.color-cta-dark-hover-bg:hover { background-color: var(--color-cta-dark-hover) !important; }
.color-cta-dark-border { border-color: var(--color-cta-dark) !important; }

/* === LAYOUT & SCROLL (prevent double scrollbar + horizontal overflow) === */
/* RULE: Only <html> scrolls. <body> must NEVER create a second scrollbar.
   If you see 2 scrollbars, something set overflow-y on body — revert it here. */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: 100% !important;
}
body {
    overflow: visible !important;
    min-height: 100% !important;
    padding-bottom: 0;
    opacity: 0;
    animation: fadeIn 0.2s ease-in forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

:root {
    --faburs-mobile-bottom-nav-height: 64px;
    --faburs-browser-bottom-inset: 0px;
    --faburs-visual-viewport-height: 100dvh;
    --faburs-visual-viewport-width: 100vw;
    /* Lightbox chrome is intentionally theme-invariant (always-dark backdrop
       for image contrast) — unlike --bg-overlay, this never follows light/dark
       or admin theme configuration. */
    --lightbox-overlay-bg: rgba(0, 0, 0, 0.9);
    --lightbox-control-bg: rgba(255, 255, 255, 0.15);
}

.faburs-mobile-fixed-bottom {
    bottom: var(--faburs-browser-bottom-inset, 0px) !important;
}

.faburs-keyboard-open .faburs-hide-when-keyboard-open {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px) + var(--faburs-browser-bottom-inset, 0px) + 12px)) !important;
    transition: opacity var(--transition-normal, 150ms ease), transform var(--transition-normal, 150ms ease);
}

.faburs-mobile-sheet {
    height: var(--faburs-visual-viewport-height, 100dvh) !important;
    max-height: var(--faburs-visual-viewport-height, 100dvh) !important;
}

@media (max-width: 767px) {
    html:has(.faburs-mobile-bottom-nav:not(.faburs-mobile-bottom-nav--hidden)):not(.faburs-keyboard-open) {
        scroll-padding-bottom: calc(var(--faburs-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--faburs-browser-bottom-inset, 0px) + 12px);
    }

    body {
        padding-bottom: calc(var(--faburs-mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--faburs-browser-bottom-inset, 0px)) !important;
    }

    .faburs-mobile-bottom-nav {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--faburs-browser-bottom-inset, 0px) !important;
        width: auto !important;
        z-index: 40 !important;
        transform: none !important;
        background: var(--navbar-bg) !important;
        color: var(--text-secondary) !important;
        border-top: 1px solid var(--border-default);
        border-color: var(--border-default) !important;
        box-shadow: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .faburs-mobile-bottom-nav > div {
        box-sizing: border-box;
        width: min(100%, 34rem);
        min-height: var(--faburs-mobile-bottom-nav-height);
        display: grid !important;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        align-items: stretch;
        gap: 0.125rem;
        padding: 0.375rem calc(0.5rem + env(safe-area-inset-right, 0px)) 0.375rem calc(0.5rem + env(safe-area-inset-left, 0px)) !important;
    }

    .mobile-bnav-item {
        box-sizing: border-box;
        position: relative;
        isolation: isolate;
        width: 100%;
        min-width: 0;
        min-height: 52px;
        margin: 0;
        padding: 0.35rem 0.25rem;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--text-secondary);
        font: inherit;
        cursor: pointer;
        transition: color var(--transition-fast);
    }

    .mobile-bnav-item i {
        color: currentColor;
        font-size: 1.375rem;
        line-height: 1;
    }

    .mobile-bnav-item:hover {
        color: var(--text-primary);
        background: none;
    }

    .mobile-bnav-item:focus-visible {
        outline: 2px solid var(--color-first);
        outline-offset: -2px;
    }

    /* Active tab: a 2px brand bar along the top edge (no tinted pill). */
    .mobile-bnav-active::before {
        content: "";
        position: absolute;
        inset: auto;
        top: -0.375rem;
        left: 0.875rem;
        right: 0.875rem;
        height: 2px;
        z-index: 0;
        border-radius: 0;
        background: var(--color-first);
    }

    .mobile-bnav-label {
        max-width: 100%;
        overflow: hidden;
        color: currentColor;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-bnav-active .mobile-bnav-label {
        font-weight: 600;
    }

    .faburs-mobile-bottom-nav.faburs-mobile-bottom-nav--hidden,
    .faburs-keyboard-open .faburs-mobile-bottom-nav,
    .faburs-keyboard-open .faburs-hide-when-keyboard-open {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px) + var(--faburs-browser-bottom-inset, 0px) + 12px)) !important;
        transition: opacity var(--transition-normal, 150ms ease), transform var(--transition-normal, 150ms ease);
    }

    .faburs-mobile-sheet {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* .support-widget / .support-window mobile geometry now owned exclusively
       by main.css (search "Support Chat Widget") — do not duplicate here. */
}

@media (min-width: 768px) {
    .faburs-mobile-bottom-nav {
        display: none !important;
    }
}

@media (max-width: 360px) {
    :root {
        --faburs-mobile-bottom-nav-height: 60px;
    }

    .faburs-mobile-bottom-nav > div {
        gap: 0;
        padding-left: calc(0.25rem + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(0.25rem + env(safe-area-inset-right, 0px)) !important;
    }

    .mobile-bnav-item {
        min-height: 48px;
        padding-left: 0.125rem;
        padding-right: 0.125rem;
    }

    .mobile-bnav-item i {
        font-size: 1.25rem;
    }

    .mobile-bnav-label {
        font-size: 0.6875rem;
    }
}

img:not([width]):not([height]) {
    background: var(--gray-100);
}

/* === SKELETON LOADERS === */
.skeleton {
    background: linear-gradient(90deg, 
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text { height: 1em; margin-bottom: 0.5em; border-radius: var(--radius-sm); }
.skeleton-circle { border-radius: 50%; }
.skeleton-rect { width: 100%; }

/* === COMMON UI COMPONENTS === */
.input-modern {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    transition: all var(--transition-base);
    background: var(--input-bg);
}

.input-modern:focus {
    outline: none;
    border-color: var(--color-first);
    box-shadow: 0 0 0 3px var(--color-first);
}

@supports (background: color-mix(in srgb, red 10%, white)) {

    .input-modern:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-first) 15%, transparent);
    }
}

/* .btn/.btn-primary/.btn-secondary intentionally NOT defined here — the
   canonical, token-driven button system lives in main.css and reads the
   admin --btn-* tokens. Every page that uses .btn classes loads the
   compiled main.css bundle. */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-xl);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge-success { background: var(--color-success); color: var(--text-inverse); }
.badge-warning { background: var(--color-warning); color: var(--gray-900); }
.badge-error { background: var(--color-error); color: var(--text-inverse); }
.badge-info { background: var(--color-second); color: var(--text-inverse); }

/* === UTILITY CLASSES === */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.spinner {
    border: 3px solid var(--gray-200);
    border-top-color: var(--color-first);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple-effect:active::after {
    width: 300px;
    height: 300px;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* === ACCESSIBILITY === */
*:focus-visible {
    outline: 3px solid var(--color-first);
    outline-offset: 2px;
}

.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-first);
    color: var(--text-inverse);
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

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

/* === FABURS BRAND ELEMENTS === */

/* Global font — uses design system variable, auto-switches for JP */
body {
    font-family: var(--fab-font-body);
}
/* Japanese locale override (set by i18n.js when lang=JP) */
[lang="ja"] body, [data-lang="JP"] body {
    font-family: var(--fab-font-body-jp);
    line-height: var(--fab-leading-jp);
}
[lang="ja"] p, [lang="ja"] li, [lang="ja"] td, [lang="ja"] dd,
[data-lang="JP"] p, [data-lang="JP"] li, [data-lang="JP"] td, [data-lang="JP"] dd {
    line-height: var(--fab-leading-jp);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fab-font-heading);
}
[lang="ja"] h1, [lang="ja"] h2, [lang="ja"] h3, [lang="ja"] h4, [lang="ja"] h5, [lang="ja"] h6,
[data-lang="JP"] h1, [data-lang="JP"] h2, [data-lang="JP"] h3, [data-lang="JP"] h4, [data-lang="JP"] h5, [data-lang="JP"] h6 {
    font-family: var(--fab-font-heading-jp);
}
code, pre, .font-mono {
    font-family: var(--fab-font-mono);
}

/* Faburs gradient backgrounds */
.faburs-gradient { background: linear-gradient(135deg, var(--color-first) 0%, var(--color-second) 100%); }
.faburs-gradient-light { background: linear-gradient(135deg, var(--color-third) 0%, var(--card-bg) 100%); }
.faburs-gradient-text { 
    background: linear-gradient(135deg, var(--color-first) 0%, var(--color-second) 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text;
}

/* Section headers — consistent across all pages */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.section-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); }
.section-header a { font-size: 0.875rem; font-weight: 500; color: var(--color-first); text-decoration: none; }
.section-header a:hover { text-decoration: underline; }

/* Product card — reusable across all product grids */
.faburs-product-card {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.faburs-product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.faburs-product-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.faburs-product-card .card-body { padding: 0.75rem; flex: 1; display: flex; flex-direction: column; }
.faburs-product-card .card-title { font-size: 0.8rem; font-weight: 600; color: var(--gray-900); line-height: 1.35; margin: 0 0 0.25rem; }
.faburs-product-card .card-price { font-size: 0.9rem; font-weight: 700; color: var(--color-first); margin-top: auto; }

/* Tab navigation — reusable */
.faburs-tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.faburs-tabs button, .faburs-tabs a {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.faburs-tabs button:hover, .faburs-tabs a:hover { color: var(--color-first); }
.faburs-tabs button.active, .faburs-tabs a.active {
    color: var(--color-first);
    border-bottom-color: var(--color-first);
}

/* Empty state — reusable */
.faburs-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-500);
}
.faburs-empty-state svg { width: 4rem; height: 4rem; margin: 0 auto 1rem; color: var(--gray-300); }
.faburs-empty-state h3 { font-size: 1.125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.5rem; }
.faburs-empty-state p { font-size: 0.875rem; max-width: 24rem; margin: 0 auto; }

/* Compact notification fallback */
.faburs-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 76px);
    left: 50%;
    transform: translateX(-50%);
    max-width: min(calc(100vw - 32px), 520px);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: center;
    z-index: 9999;
    color: var(--gray-700);
    background: var(--card-bg);
    box-shadow: 0 8px 24px rgba(15,23,42,.10);
    animation: toast-in 0.3s ease;
}
.faburs-toast-success { border-color: var(--color-success); }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-toast-success { border-color: color-mix(in srgb, var(--color-success) 45%, var(--gray-200));
    }
}
.faburs-toast-error { border-color: var(--color-error); }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-toast-error { border-color: color-mix(in srgb, var(--color-error) 45%, var(--gray-200));
    }
}
.faburs-toast-info { border-color: var(--color-first); }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-toast-info { border-color: color-mix(in srgb, var(--color-first) 45%, var(--gray-200));
    }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-0.5rem); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Page container — consistent max-width and padding */
.faburs-container { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .faburs-container { padding-left: 2rem; padding-right: 2rem; } }

/* === PRINT === */
@media print {
    .no-print { display: none !important; }
    body { background: white; color: black; }
    a { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
}

/* === EXTENDED COLOR UTILITIES === */

/* Color-first lighter (very light tint — for active/selected backgrounds) */
.color-first-lighter-bg { background-color: var(--color-first-lighter) !important; }
.color-first-light-bg   { background-color: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .color-first-light-bg { background-color: color-mix(in srgb, var(--color-first) 15%, var(--card-bg)) !important;
    }
}

/* Status-tinted light backgrounds + borders (parallel to color-first-light-bg) */
.color-warning-light-bg { background-color: var(--ios-warning-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .color-warning-light-bg { background-color: color-mix(in srgb, var(--color-warning) 15%, var(--card-bg)) !important;
    }
}
.color-success-light-bg { background-color: var(--ios-success-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .color-success-light-bg { background-color: color-mix(in srgb, var(--color-success) 15%, var(--card-bg)) !important;
    }
}
.color-error-light-bg   { background-color: var(--ios-error-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .color-error-light-bg { background-color: color-mix(in srgb, var(--color-error) 15%, var(--card-bg)) !important;
    }
}
.color-warning-border   { border-color: var(--color-warning) !important; }
.color-success-border   { border-color: var(--color-success) !important; }
.color-error-border     { border-color: var(--color-error) !important; }
.hover-color-warning-light-bg:hover { background-color: var(--ios-warning-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .hover-color-warning-light-bg:hover { background-color: color-mix(in srgb, var(--color-warning) 15%, var(--card-bg)) !important;
    }
}
.hover-color-success-light-bg:hover { background-color: var(--ios-success-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .hover-color-success-light-bg:hover { background-color: color-mix(in srgb, var(--color-success) 15%, var(--card-bg)) !important;
    }
}
.hover-color-error-light-bg:hover   { background-color: var(--ios-error-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .hover-color-error-light-bg:hover { background-color: color-mix(in srgb, var(--color-error) 15%, var(--card-bg)) !important;
    }
}
.hover-color-text-secondary:hover   { color: var(--text-secondary) !important; }
.hover-color-border-strong:hover    { border-color: var(--border-strong) !important; }
.hover-color-warning-border:hover   { border-color: var(--color-warning) !important; }
.hover-color-error-border:hover     { border-color: var(--color-error) !important; }
.hover-color-success-border:hover   { border-color: var(--color-success) !important; }
.hover-color-surface-raised-bg:hover { background-color: var(--bg-surface-raised) !important; }
.hover-color-surface-sunken-bg:hover { background-color: var(--bg-surface-sunken) !important; }
.hover-color-error:hover            { color: var(--color-error) !important; }
.hover-color-warning-bg:hover       { background-color: var(--color-warning) !important; }
.hover-color-success-bg:hover       { background-color: var(--color-success) !important; }
.hover-color-error-bg:hover         { background-color: var(--color-error) !important; }

/* Active (:active / tap) state parity with existing :hover utilities */
.active-color-surface-sunken-bg:active { background-color: var(--bg-surface-sunken) !important; }
.active-color-first-light-bg:active    { background-color: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .active-color-first-light-bg:active { background-color: color-mix(in srgb, var(--color-first) 12%, var(--card-bg)) !important;
    }
}
.active-color-success-bg:active        { background-color: var(--color-success) !important; }
.active-color-error-bg:active          { background-color: var(--color-error) !important; }

/* Neutral focus ring (secondary actions — parallel to focus:ring-brand on primary actions) */
.focus-ring-neutral:focus { outline: none; box-shadow: 0 0 0 4px var(--border-default); }

/* Star rating — distinct from brand color, always warm-amber (--color-star
   is the contrast-safe amber; falls back to raw amber if the token is absent) */
.faburs-star-filled { color: var(--color-star, var(--color-warning)) !important; }
.faburs-star-empty  { color: var(--text-tertiary) !important; }
.faburs-star-hover:hover { color: var(--color-star, var(--color-warning)) !important; }

/* Hover state utilities — color-first */
.hover-color-first-bg:hover         { background-color: var(--color-first) !important; }
.hover-color-first-light-bg:hover   { background-color: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised))) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .hover-color-first-light-bg:hover { background-color: color-mix(in srgb, var(--color-first) 15%, var(--card-bg)) !important;
    }
}
.hover-color-first-lighter-bg:hover { background-color: var(--color-first-lighter) !important; }

/* Hover state utilities — color-second */
.hover-color-second:hover       { color: var(--color-second) !important; }
.hover-color-second-bg:hover    { background-color: var(--color-second) !important; }

/* Disabled / muted state utilities */
.color-disabled          { color: var(--gray-500) !important; }
.color-disabled-dark     { color: var(--gray-700) !important; }
.color-disabled-bg       { background-color: var(--bg-overlay) !important; }
.color-disabled-light-bg { background-color: var(--gray-200) !important; }

/* Hover state utilities — disabled */
.hover-color-disabled-dark:hover    { color: var(--gray-700) !important; }
.hover-color-disabled-dark-bg:hover { background-color: var(--gray-700) !important; }

/* === TEXT COLOR UTILITIES (for editor content) === */
.color-text-primary   { color: var(--text-primary)   !important; }
.color-text-secondary { color: var(--text-secondary) !important; }
.color-text-tertiary  { color: var(--text-tertiary)  !important; }
.color-text-inverse   { color: var(--text-inverse)   !important; }
.color-text-inverse-muted { color: var(--text-inverse) !important; }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .color-text-inverse-muted { color: color-mix(in srgb, var(--text-inverse) 80%, transparent) !important;
    }
}

/* Fixed-white text/border for content over dark, theme-invariant surfaces
   (full-screen loading overlays on .modal-backdrop, image hover-darken
   scrims) — unlike color-text-inverse, this does NOT flip in dark mode,
   since the dark scrim it sits on doesn't flip either. */
.color-image-overlay-text   { color: var(--color-image-overlay-text)         !important; }
.color-image-overlay-border { border-color: var(--color-image-overlay-text) !important; }

/* Scrollbar utilities */
.scrollbar-thumb-color-first  { scrollbar-color: var(--color-first) transparent; }
.scrollbar-thumb-color-first::-webkit-scrollbar-thumb { background-color: var(--color-first); border-radius: var(--radius-full); }
.scrollbar-thumb-color-first::-webkit-scrollbar       { width: 6px; height: 6px; }
.scrollbar-track-transparent::-webkit-scrollbar-track { background: transparent; }

/* === MOBILE TYPOGRAPHY SCALING (iPhone SE: 375px min) === */
@media (max-width: 480px) {
    :root {
        --fab-text-4xl:  2rem;       /* 48→32px */
        --fab-text-3xl:  1.75rem;    /* 36→28px */
        --fab-text-2xl:  1.375rem;   /* 28→22px */
        --fab-text-xl:   1.125rem;   /* 22→18px */
        --spacing-xl:    1.5rem;     /* 32→24px */
        --spacing-2xl:   2rem;       /* 48→32px */
    }
}

@media (max-width: 375px) {
    :root {
        --fab-text-4xl:  1.75rem;    /* 48→28px on smallest screens */
        --fab-text-3xl:  1.5rem;     /* 36→24px */
        --fab-text-2xl:  1.25rem;    /* 28→20px */
        --radius-lg:     0.375rem;     /* tighter radii on small screens */
        --radius-xl:     0.75rem;
    }
}

/* === TOUCH TARGET ENFORCEMENT (mobile) ===
   WCAG 2.5.8 — all interactive elements must be ≥44px on touch devices. */
@media (pointer: coarse) {
    button, [role="button"],
    input[type="button"], input[type="submit"], input[type="reset"],
    select, .btn, .faburs-tabs button, .faburs-tabs a {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }
    input[type="checkbox"], input[type="radio"] {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        cursor: pointer;
    }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="date"], textarea, select {
        min-height: var(--touch-target-min);
        font-size: max(1rem, 16px); /* prevents iOS zoom on focus */
    }
    /* Anchors: 44px minimums only for nav/menu links — an allowlist, NOT a
       blanket rule. The old bare-anchor rule (a:not(...)) forced display:flex
       on every inline text link, breaking prose links and inline icon+text
       layout. Inline links in running text are exempt per WCAG 2.5.8. */
    nav a,
    [role="navigation"] a,
    .nav-profile-menu-item,
    .mobile-bnav-item,
    .skip-to-main {
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
    }
    .faburs-recovery-btn {
        min-height: var(--touch-target-min);
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    .faburs-hint__apply {
        min-height: var(--touch-target-min);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    .faburs-error-banner__dismiss {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* === MOBILE FORM UX IMPROVEMENTS === */
@media (max-width: 767px) {
    input, textarea, select {
        -webkit-appearance: none;
        border-radius: var(--radius-md);
    }
    .faburs-error-banner {
        flex-wrap: wrap;
    }
    .faburs-error-banner__product {
        flex-direction: column;
        align-items: flex-start;
    }
    .faburs-recovery-actions {
        flex-direction: column;
    }
    .faburs-recovery-btn {
        width: 100%;
        justify-content: center;
    }
}

/* === FORM VALIDATION STATE CLASSES ===
   Use these instead of hardcoded Tailwind text-red-500 / border-green-500 etc.
   They pull from the design system tokens so dark mode and admin theming work. */
.faburs-input-error {
    border-color: var(--color-error) !important;
}
.faburs-input-error:focus {
    box-shadow: 0 0 0 3px var(--color-error);
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-input-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
    }
}
.faburs-input-valid {
    border-color: var(--color-success) !important;
}
.faburs-input-valid:focus {
    box-shadow: 0 0 0 3px var(--color-success);
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-input-valid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 20%, transparent);
    }
}

/* === FOCUS VISIBLE — keyboard navigation ring === */
:focus-visible {
    outline: 2px solid var(--color-first);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* === ENHANCED ERROR COMPONENTS === */
.faburs-error-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-error);
    background: var(--ios-error-tint, var(--color-first-lighter, var(--bg-surface-raised)));
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-error-banner {
    background: color-mix(in srgb, var(--color-error) 8%, var(--card-bg));
    }
}
.faburs-error-banner[data-severity="warning"] {
    border-left-color: var(--color-warning);
    background: var(--ios-warning-tint, var(--color-first-lighter, var(--bg-surface-raised)));
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-error-banner[data-severity="warning"] {
    background: color-mix(in srgb, var(--color-warning) 8%, var(--card-bg));
    }
}
.faburs-error-banner[data-severity="info"] {
    border-left-color: var(--color-first);
    background: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised)));
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-error-banner[data-severity="info"] {
    background: color-mix(in srgb, var(--color-first) 8%, var(--card-bg));
    }
}
.faburs-error-banner__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}
.faburs-error-banner__body { flex: 1; min-width: 0; }
.faburs-error-banner__title {
    font-weight: 600;
    font-size: var(--fab-text-sm);
    margin-bottom: var(--spacing-xs);
}
.faburs-error-banner__message {
    font-size: var(--fab-text-sm);
    color: var(--text-secondary);
}
.faburs-error-banner__product {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--bg-surface-raised);
}
.faburs-error-banner__product img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.faburs-error-banner__dismiss {
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-tertiary);
    padding: var(--spacing-xs);
    font-size: 1.25rem;
    line-height: 1;
    transition: color var(--transition-fast);
}
.faburs-error-banner__dismiss:hover { color: var(--text-primary); }

.faburs-recovery-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}
.faburs-recovery-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-first-light);
    background: var(--color-first-lighter);
    color: var(--color-first);
    font-size: var(--fab-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.faburs-recovery-btn:hover {
    background: var(--color-first);
    color: var(--text-inverse);
}
.faburs-recovery-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === STOCK STATUS INDICATOR === */
.faburs-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--fab-text-xs);
    font-weight: 600;
    padding: 0.125rem var(--spacing-sm);
    border-radius: var(--radius-full);
}
.faburs-stock-badge--out {
    background: var(--ios-error-tint, var(--color-first-lighter, var(--bg-surface-raised)));
    color: var(--color-error);
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-stock-badge--out {
    background: color-mix(in srgb, var(--color-error) 12%, var(--card-bg));
    }
}
.faburs-stock-badge--low {
    background: var(--ios-warning-tint, var(--color-first-lighter, var(--bg-surface-raised)));
    color: var(--color-warning);
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-stock-badge--low {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--card-bg));
    }
}
.faburs-stock-badge--ok {
    background: var(--ios-success-tint, var(--color-first-lighter, var(--bg-surface-raised)));
    color: var(--color-success);
}
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-stock-badge--ok {
    background: color-mix(in srgb, var(--color-success) 12%, var(--card-bg));
    }
}

/* === VALIDATION HINTS === */
.faburs-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--fab-text-xs);
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}
.faburs-hint--error   { color: var(--color-error);   background: var(--ios-error-tint, var(--color-first-lighter, var(--bg-surface-raised))); }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-hint--error {   background: color-mix(in srgb, var(--color-error)   8%, var(--card-bg));
    }
}
.faburs-hint--warning { color: var(--color-warning); background: var(--ios-warning-tint, var(--color-first-lighter, var(--bg-surface-raised))); }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-hint--warning { background: color-mix(in srgb, var(--color-warning) 8%, var(--card-bg));
    }
}
.faburs-hint--info    { color: var(--color-first);   background: var(--ios-brand-tint, var(--color-first-lighter, var(--bg-surface-raised))); }
@supports (background: color-mix(in srgb, red 10%, white)) {

    .faburs-hint--info {   background: color-mix(in srgb, var(--color-first)   8%, var(--card-bg));
    }
}
.faburs-hint__apply {
    margin-left: auto;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    text-decoration: underline;
    padding: 0;
}

/* === ARIA LIVE REGION (visually hidden but accessible) === */
.faburs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ═══ DB overrides — injected by ThemeCssService from ColorScheme config ═══ */
:root {
    --light-color-first: #5B4B3E;
    --light-color-first-hover: #44382E;
    --light-color-first-light: #E7E2DC;
    --light-color-first-lighter: #F2F0ED;
    --light-color-second: #282723;
    --light-color-second-hover: #414039;
    --light-color-second-light: #625F56;
    --light-color-third: #E7E9DE;
    --light-color-success: #4D6546;
    --light-color-warning: #866218;
    --light-color-error: #AD3F35;
    --light-bg-page: #FFFFFF;
    --light-border-default: #DFDEDB;
    --light-border-strong: #B8B5AF;
    --light-card-bg: #FFFFFF;
    --light-bg-surface: #F6F6F5;
    --light-shadow-color-rgb: 40 39 35;
    --light-shadow-opacity: 0.06;
    --light-overlay-color-rgb: 40 39 35;
    --light-overlay-opacity: 0.48;
    --light-bg-overlay-blur: 0px;
    --light-text-primary: #282723;
    --light-text-secondary: #5C5951;
    --light-text-tertiary: #6A655B;
    --light-text-inverse: #FFFFFF;
    --light-image-overlay-text: #ffffff;
    --light-bg-surface-raised: #FFFFFF;
    --light-bg-surface-sunken: #EFEFED;
    --light-bg-secondary: #F6F6F5;
    --light-bg-modal: #FFFFFF;
    --light-navbar-bg: #FFFFFF;
    --light-input-bg: #ffffff;
    --light-input-border: #8E897E;
    --light-btn-primary-bg: #5B4B3E;
    --light-btn-primary-text: #FFFFFF;
    --light-btn-secondary-bg: #FFFFFF;
    --light-btn-secondary-text: #282723;
    --light-skeleton-bg: #E6E5E2;
    --light-skeleton-shine: #F6F6F5;
    --dark-color-first: #C3B09A;
    --dark-color-first-hover: #D6C6B3;
    --dark-color-first-light: #494037;
    --dark-color-first-lighter: #332E28;
    --dark-color-second: #F0ECE2;
    --dark-color-second-hover: #FFFFFF;
    --dark-color-second-light: #C1BAAD;
    --dark-color-third: #30382D;
    --dark-color-success: #A4B594;
    --dark-color-warning: #DEC180;
    --dark-color-error: #F09E91;
    --dark-bg-page: #1D1E1B;
    --dark-bg-surface: #2A2B26;
    --dark-text-primary: #F0ECE2;
    --dark-text-secondary: #C1BAAD;
    --dark-card-bg: #252622;
    --dark-navbar-bg: #1D1E1B;
    --dark-border-default: #414239;
    --dark-border-strong: #616357;
    --dark-shadow-color-rgb: 0 0 0;
    --dark-shadow-opacity: 0.28;
    --dark-overlay-color-rgb: 0 0 0;
    --dark-overlay-opacity: 0.64;
    --dark-bg-overlay-blur: 0px;
    --dark-text-tertiary: #AAA496;
    --dark-text-inverse: #1D1E1B;
    --dark-image-overlay-text: #ffffff;
    --dark-bg-surface-raised: #32332D;
    --dark-bg-surface-sunken: #171815;
    --dark-bg-secondary: #24251F;
    --dark-bg-modal: #292A25;
    --dark-input-bg: #20211D;
    --dark-input-border: #858779;
    --dark-btn-primary-bg: #C3B09A;
    --dark-btn-primary-text: #1D1E1B;
    --dark-btn-secondary-bg: #2A2B26;
    --dark-btn-secondary-text: #F0ECE2;
    --dark-skeleton-bg: #34362F;
    --dark-skeleton-shine: #44473C;
    --fab-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --fab-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fab-font-heading-jp: 'Shippori Mincho', 'Yu Mincho', serif;
    --fab-font-body-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --fab-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.375rem;
}


/* Runtime layout guard -- injected by ThemeCssService. */
body {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}