/* ❇️ @fancyfleet/tokens — Canonical design tokens
 *
 * Zinc palette, --color-* naming, dark-base, self-contained.
 *
 * This is the SINGLE canonical token entrypoint. Consumers should
 * import ONLY this file — not src/*.css (deprecated Warm Precision).
 *
 *   @import "@fancyfleet/tokens/tokens.css";
 *
 * Dark-base: the :root block below is a dark theme. A light override
 * activates via prefers-color-scheme: light. If manual control is
 * needed, use the data-theme attribute selectors at the bottom.
 *
 * ── Contents ─────────────────────────────────────────────────
 * 1. Neutral palette (zinc scale)          — --color-zinc-*
 * 2. Brand & semantic colors               — --color-{role}-{intent}
 * 2a. Status tinted backgrounds & borders    — --color-{status}-bg, --color-{status}-border
 * 3. Surface & text (themed)               — --color-surface, --color-text-*
 * 4. Border tokens (themed)                — --color-border-*
 * 5. Overlay / interactive (themed)        — --color-overlay
 * 6. Typography                            — --font-*, --font-size-*, etc.
 * 7. Spacing scale (4px base)              — --space-*
 * 8. Border radius                         — --radius-*
 * 9. Elevation / shadow                    — --shadow-*
 * 10. Motion / transition                  — --motion-*, --ease-*, --duration-*
 * 11. Link colors                          — --color-link, --color-link-hover, --color-link-visited
 * 12. Z-index scale                        — --z-*
 * 13. Opacity scale                        — --opacity-*
 * 14. Breakpoint tokens                    — --breakpoint-*
 * 15. Light-theme override                 — @media (prefers-color-scheme: light)
 * 16. Manual theme control                 — :root[data-theme="dark"] / :root[data-theme="light"]
 * ──────────────────────────────────────────────────────────────
 */

:root {
  /* ──────────────────────────────────────────────
     1. Neutral palette — zinc scale
        Tailwind-compatible zinc gray values.
     ────────────────────────────────────────────── */
  --color-white:          #ffffff;
  --color-black:          #000000;
  --color-transparent:    transparent;

  --color-zinc-50:        #fafafa;
  --color-zinc-100:       #f4f4f5;
  --color-zinc-200:       #e4e4e7;
  --color-zinc-300:       #d4d4d8;
  --color-zinc-400:       #a1a1aa;
  --color-zinc-500:       #71717a;
  --color-zinc-600:       #52525b;
  --color-zinc-700:       #3f3f46;
  --color-zinc-800:       #27272a;
  --color-zinc-900:       #18181b;
  --color-zinc-950:       #09090b;

  /* ──────────────────────────────────────────────
     2. Brand & semantic colors
     ────────────────────────────────────────────── */
  --color-brand-primary:        #c4a882;
  --color-brand-primary-strong: #dec49c;
  --color-brand-primary-subtle: #3d2c1e;
  --color-brand-primary-muted:  #5e4833;
  --color-brand-secondary:      #dba45a;

  --color-accent:               #7fa3c7;
  --color-accent-strong:        #9fc7eb;

  --color-success:              #6db07e;
  --color-warning:              #dba45a;
  --color-error:                #cf685c;
  --color-info:                 #7fa3c7;

  /* Link colors */
  --color-link:                 #7fa3c7;
  --color-link-hover:           #9fc7eb;
  --color-link-visited:         #a37fc7;

  /* ──────────────────────────────────────────────
     3. Surface & text (themed — dark base)
     ────────────────────────────────────────────── */
  --color-bg:                    #1a1816;
  --color-surface:               #242220;
  --color-surface-raised:        #2c2a26;
  --color-surface-hover:         #33312c;
  --color-surface-subtle:        #2c2a26;

  --color-text-primary:          #e6e2da;
  --color-text-secondary:        #a39d92;
  --color-text-tertiary:         #736d62;
  --color-text-inverse:          #1c1a17;
  --color-text-disabled:         #52525b;

  /* ──────────────────────────────────────────────
     4. Border tokens (themed — dark base)
     ────────────────────────────────────────────── */
  --color-border:                #3b3833;
  --color-border-strong:         #5c5850;
  --color-border-hover:          #52525b;
  --color-border-subtle:         #27272a;
  --color-border-focus:          #7fa3c7;

  /* ──────────────────────────────────────────────
     5. Overlay / interactive
     ────────────────────────────────────────────── */
  /* Status tinted backgrounds & borders (derived from semantic colors) */
  --color-success-bg:           #2e372e;
  --color-success-border:       #4c624d;
  --color-warning-bg:           #3f3528;
  --color-warning-border:       #735d40;
  --color-error-bg:             #3d2c29;
  --color-error-border:         #6e4841;
  --color-info-bg:              #313539;
  --color-info-border:          #525d66;

  /* Recessed surface (code blocks, diff viewers, wells) */
  --color-surface-deep:         #0f0e0d;

  --color-overlay:               rgba(0, 0, 0, 0.6);
  --color-focus-ring:            #7fa3c7;

  /* ──────────────────────────────────────────────
     6. Typography
     ────────────────────────────────────────────── */
  /* Font families */
  --font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-serif);
  --font-ui: var(--font-sans);
  --font-data: var(--font-mono);
  --font-serif:   "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Fira Code",
                  "Fira Mono", "Roboto Mono", Consolas, monospace;

  /* Font sizes */
  --font-size-xs:    0.75rem;    /* 12px */
  --font-size-sm:    0.875rem;   /* 14px */
  --font-size-base:  1rem;       /* 16px */
  --font-size-lg:    1.125rem;   /* 18px */
  --font-size-xl:    1.25rem;    /* 20px */
  --font-size-2xl:   1.5rem;     /* 24px */
  --font-size-3xl:   1.875rem;   /* 30px */
  --font-size-4xl:   2.25rem;    /* 36px */
  --font-size-5xl:   3rem;       /* 48px */

  /* Line heights */
  --line-height-tight:    1.15;
  --line-height-snug:     1.3;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.65;

  /* Font weights */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

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

  /* ──────────────────────────────────────────────
     7. Spacing scale (4px base)
     ────────────────────────────────────────────── */
  --space-0:     0;
  --space-0-5:   0.125rem;   /*  2px */
  --space-1:     0.25rem;    /*  4px */
  --space-2:     0.5rem;     /*  8px */
  --space-3:     0.75rem;    /* 12px */
  --space-4:     1rem;       /* 16px */
  --space-5:     1.25rem;    /* 20px */
  --space-6:     1.5rem;     /* 24px */
  --space-8:     2rem;       /* 32px */
  --space-10:    2.5rem;     /* 40px */
  --space-12:    3rem;       /* 48px */
  --space-16:    4rem;       /* 64px */
  --space-20:    5rem;       /* 80px */
  --space-24:    6rem;       /* 96px */

  /* ──────────────────────────────────────────────
     8. Border radius
     ────────────────────────────────────────────── */
  --radius-sm:    0.25rem;    /*  4px — chips, tags */
  --radius-md:    0.5rem;     /*  8px — buttons, inputs */
  --radius-lg:    0.75rem;    /* 12px — cards, panels */
  --radius-xl:    1rem;       /* 16px — modals, bottom sheets */
  --radius-full:  9999px;     /* pill-shaped elements */

  /* ──────────────────────────────────────────────
     9. Elevation / shadow
     ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3),
                0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.3),
                0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg:  0 4px 8px rgba(0, 0, 0, 0.3),
                0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 8px 16px rgba(0, 0, 0, 0.3),
                0 16px 32px rgba(0, 0, 0, 0.15);

  /* ──────────────────────────────────────────────
     10. Motion / transition
     ────────────────────────────────────────────── */
  --motion-lateral:  0.34s cubic-bezier(0.4, 0, 0.2, 1);
  --motion-rise:     0.38s cubic-bezier(0.32, 0.72, 0, 1);
  --motion-dock:     0.40s cubic-bezier(0.32, 0.72, 0, 1);

  --ease-settle:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   0.15s;
  --duration-base:   0.24s;
  --duration-slow:   0.40s;

  /* ──────────────────────────────────────────────
     10a. Z-index scale
     ────────────────────────────────────────────── */
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-drawer:    400;
  --z-modal:     500;
  --z-tooltip:   600;

  /* ──────────────────────────────────────────────
     10b. Opacity scale
     ────────────────────────────────────────────── */
  --opacity-0:     0;
  --opacity-10:    0.1;
  --opacity-20:    0.2;
  --opacity-30:    0.3;
  --opacity-40:    0.4;
  --opacity-50:    0.5;
  --opacity-60:    0.6;
  --opacity-70:    0.7;
  --opacity-80:    0.8;
  --opacity-90:    0.9;
  --opacity-100:   1;

  /* ──────────────────────────────────────────────
     10c. Breakpoint tokens
     ────────────────────────────────────────────── */
  --breakpoint-sm:    640px;
  --breakpoint-md:    768px;
  --breakpoint-lg:    1024px;
  --breakpoint-xl:    1280px;
  --breakpoint-2xl:   1536px;
}

/* ──────────────────────────────────────────────
   11. Light-theme override
   ────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    /* Brand & semantic (light theme) */
    --color-brand-primary:        #6b4f3c;
    --color-brand-primary-strong: #4f3828;
    --color-brand-primary-subtle: #f0e8de;
    --color-brand-primary-muted:  #d9cbbe;
    --color-brand-secondary:      #b8863a;

    --color-accent:               #4f6f8f;
    --color-accent-strong:        #3a5a7a;

    --color-success:              #4a7c59;
    --color-warning:              #b8863a;
    --color-error:                #a0443a;
    --color-info:                 #4f6f8f;

    /* Link colors */
    --color-link:               #4f6f8f;
    --color-link-hover:         #3a5a7a;
    --color-link-visited:       #7a4f8f;

    /* Surface & text */
    --color-bg:                    #f7f5f1;
    --color-surface:               #ffffff;
    --color-surface-raised:        #ffffff;
    --color-surface-hover:         #f0ede8;
    --color-surface-subtle:        #f0ede8;

    --color-text-primary:          #1c1a17;
    --color-text-secondary:        #6b655c;
    --color-text-tertiary:         #9c958a;
    --color-text-inverse:          #f0ede8;
    --color-text-disabled:         #a1a1aa;

    /* Borders */
    --color-border:                #e2ddd6;
    --color-border-strong:         #c4beb4;
    --color-border-hover:          #d4d4d8;
    --color-border-subtle:         #e4e4e7;
    --color-border-focus:          #4f6f8f;

    /* Status tinted backgrounds & borders */
    --color-success-bg:           #e9efeb;
    --color-success-border:       #b4bfb0;
    --color-warning-bg:           #f6f0e7;
    --color-warning-border:       #d5c2a7;
    --color-error-bg:             #f3e8e7;
    --color-error-border:         #ceafa7;
    --color-info-bg:              #e9edf1;
    --color-info-border:          #b5bcc0;

    /* Recessed surface */
    --color-surface-deep:         #efefef;

    /* Overlay */
    --color-overlay:               rgba(0, 0, 0, 0.2);
    --color-focus-ring:            #4f6f8f;

    /* Elevation (light: softer shadows, dark ground) */
    --shadow-sm:  0 1px 2px rgba(28, 26, 23, 0.06),
                  0 1px 3px rgba(28, 26, 23, 0.1);
    --shadow-md:  0 2px 4px rgba(28, 26, 23, 0.06),
                  0 4px 8px rgba(28, 26, 23, 0.1);
    --shadow-lg:  0 4px 8px rgba(28, 26, 23, 0.08),
                  0 8px 16px rgba(28, 26, 23, 0.12);
    --shadow-xl:  0 8px 16px rgba(28, 26, 23, 0.1),
                  0 16px 32px rgba(28, 26, 23, 0.14);
  }
}

/* ──────────────────────────────────────────────
   Reduced motion
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-lateral: 0.001ms linear;
    --motion-rise:    0.001ms linear;
    --motion-dock:    0.001ms linear;
    --duration-fast:  0.001ms;
    --duration-base:  0.001ms;
    --duration-slow:  0.001ms;
  }
}

/* ──────────────────────────────────────────────
   12. Manual theme control via data-theme
   When a consumer sets data-theme="dark" or data-theme="light"
   on <html>, these selectors override :root and
   prefers-color-scheme to give explicit control. Consumers that
   don't use data-theme continue to work via :root + media query.

   Specificity: :root[data-theme=…] = 0,2,0 — always beats
   :root (0,1,0) and @media :root (0,1,0), regardless of source
   order or OS preference.
   ────────────────────────────────────────────── */

:root[data-theme="dark"] {
  /* Brand & semantic */
  --color-brand-primary:        #c4a882;
  --color-brand-primary-strong: #dec49c;
  --color-brand-primary-subtle: #3d2c1e;
  --color-brand-primary-muted:  #5e4833;
  --color-brand-secondary:      #dba45a;

  --color-accent:               #7fa3c7;
  --color-accent-strong:        #9fc7eb;

  --color-success:              #6db07e;
  --color-warning:              #dba45a;
  --color-error:                #cf685c;
  --color-info:                 #7fa3c7;

  /* Link colors */
  --color-link:                 #7fa3c7;
  --color-link-hover:           #9fc7eb;
  --color-link-visited:         #a37fc7;

  /* Surface & text */
  --color-bg:                    #1a1816;
  --color-surface:               #242220;
  --color-surface-raised:        #2c2a26;
  --color-surface-hover:         #33312c;
  --color-surface-subtle:        #2c2a26;

  --color-text-primary:          #e6e2da;
  --color-text-secondary:        #a39d92;
  --color-text-tertiary:         #736d62;
  --color-text-inverse:          #1c1a17;
  --color-text-disabled:         #52525b;

  /* Borders */
  --color-border:                #3b3833;
  --color-border-strong:         #5c5850;
  --color-border-hover:          #52525b;
  --color-border-subtle:         #27272a;
  --color-border-focus:          #7fa3c7;

  /* Status tinted backgrounds & borders */
  --color-success-bg:           #2e372e;
  --color-success-border:       #4c624d;
  --color-warning-bg:           #3f3528;
  --color-warning-border:       #735d40;
  --color-error-bg:             #3d2c29;
  --color-error-border:         #6e4841;
  --color-info-bg:              #313539;
  --color-info-border:          #525d66;

  /* Recessed surface */
  --color-surface-deep:         #0f0e0d;

  /* Overlay */
  --color-overlay:               rgba(0, 0, 0, 0.6);
  --color-focus-ring:            #7fa3c7;

  /* Elevation (dark: stronger shadows) */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3),
                0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.3),
                0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg:  0 4px 8px rgba(0, 0, 0, 0.3),
                0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 8px 16px rgba(0, 0, 0, 0.3),
                0 16px 32px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] {
  /* Brand & semantic */
  --color-brand-primary:        #6b4f3c;
  --color-brand-primary-strong: #4f3828;
  --color-brand-primary-subtle: #f0e8de;
  --color-brand-primary-muted:  #d9cbbe;
  --color-brand-secondary:      #b8863a;

  --color-accent:               #4f6f8f;
  --color-accent-strong:        #3a5a7a;

  --color-success:              #4a7c59;
  --color-warning:              #b8863a;
  --color-error:                #a0443a;
  --color-info:                 #4f6f8f;

  /* Link colors */
  --color-link:                 #4f6f8f;
  --color-link-hover:           #3a5a7a;
  --color-link-visited:         #7a4f8f;

  /* Surface & text */
  --color-bg:                    #f7f5f1;
  --color-surface:               #ffffff;
  --color-surface-raised:        #ffffff;
  --color-surface-hover:         #f0ede8;
  --color-surface-subtle:        #f0ede8;

  --color-text-primary:          #1c1a17;
  --color-text-secondary:        #6b655c;
  --color-text-tertiary:         #9c958a;
  --color-text-inverse:          #f0ede8;
  --color-text-disabled:         #a1a1aa;

  /* Borders */
  --color-border:                #e2ddd6;
  --color-border-strong:         #c4beb4;
  --color-border-hover:          #d4d4d8;
  --color-border-subtle:         #e4e4e7;
  --color-border-focus:          #4f6f8f;

  /* Status tinted backgrounds & borders */
  --color-success-bg:           #e9efeb;
  --color-success-border:       #b4bfb0;
  --color-warning-bg:           #f6f0e7;
  --color-warning-border:       #d5c2a7;
  --color-error-bg:             #f3e8e7;
  --color-error-border:         #ceafa7;
  --color-info-bg:              #e9edf1;
  --color-info-border:          #b5bcc0;

  /* Recessed surface */
  --color-surface-deep:         #efefef;

  /* Overlay */
  --color-overlay:               rgba(0, 0, 0, 0.2);
  --color-focus-ring:            #4f6f8f;

  /* Elevation (light: softer shadows, dark ground) */
  --shadow-sm:  0 1px 2px rgba(28, 26, 23, 0.06),
                0 1px 3px rgba(28, 26, 23, 0.1);
  --shadow-md:  0 2px 4px rgba(28, 26, 23, 0.06),
                0 4px 8px rgba(28, 26, 23, 0.1);
  --shadow-lg:  0 4px 8px rgba(28, 26, 23, 0.08),
                0 8px 16px rgba(28, 26, 23, 0.12);
  --shadow-xl:  0 8px 16px rgba(28, 26, 23, 0.1),
                0 16px 32px rgba(28, 26, 23, 0.14);
}

/* Console status text: warning must remain readable at small sizes on light surfaces. */
:root { --color-status-warning-text: var(--color-warning); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --color-status-warning-text: var(--color-brand-primary); } }
:root[data-theme="light"] { --color-status-warning-text: var(--color-brand-primary); }
:root[data-theme="dark"] { --color-status-warning-text: var(--color-warning); }

/* Feltbox product palette — BBS-34. Brand primitives from BBS-24 Open Lid and listing frames; additive, no global theme override. */
:root {
 --feltbox-felt-deep: #0b211b;
 --feltbox-felt: #225743;
 --feltbox-paper: #f3eee5;
 --feltbox-card: #eee4cf;
 --feltbox-ink: #25211e;
 --feltbox-wood: #805337;
 --feltbox-linen: #cbbb9d;
 --feltbox-dark-surface: #16352b;
 --feltbox-dark-muted: #bac4ba;
 --feltbox-light-muted: #595b50;
 --feltbox-side-dark-light: #713e60;
 --feltbox-side-dark-dark: #d7a6c4;
 --feltbox-side-light-light: #6d531f;
 --feltbox-side-light-dark: #e3d8bf;
 --feltbox-line-light: #8a887a;
 --feltbox-line-dark: #779487;
}

/* Feltbox semantic theme aliases. Namespaced to avoid global product overrides. */
:root{--fb-bg:var(--feltbox-felt-deep);--fb-panel:var(--feltbox-dark-surface);--fb-text:var(--feltbox-paper);--fb-muted:var(--feltbox-dark-muted);--fb-accent:var(--feltbox-card);--fb-on-accent:var(--feltbox-ink);--fb-line:var(--feltbox-line-dark);--fb-dark:var(--feltbox-side-dark-dark);--fb-light:var(--feltbox-side-light-dark)}
:root[data-theme="light"]{--fb-bg:var(--feltbox-paper);--fb-panel:var(--color-white);--fb-text:var(--feltbox-ink);--fb-muted:var(--feltbox-light-muted);--fb-accent:var(--feltbox-felt);--fb-on-accent:var(--feltbox-paper);--fb-line:var(--feltbox-line-light);--fb-dark:var(--feltbox-side-dark-light);--fb-light:var(--feltbox-side-light-light)}

/* Feltbox material study: neutral light felt, lacquer, stock, diffraction. */
:root{--fv-felt:#132e26;--fv-lit:#254d3c;--fv-ivory:#d9ddd5;--fv-ivory-lit:#eef0e9;--fv-rim:#171c18;--fv-rim-light:#a4aba0;--fv-brass:#c5ab75;--fv-shadow:#050b08;--fv-silver:#cbdad5;--fv-foil-a:#9ebacd;--fv-foil-b:#c4a6cc;--fv-foil-c:#c9d8a0;--fv-art:#263d44;--fv-art-light:#7c9c98;--fv-star:#f5eed8;--fv-bg:var(--fv-felt);--fv-high:var(--fv-lit);--fv-ink:var(--feltbox-paper);--fv-muted:var(--feltbox-dark-muted);--fv-structure:var(--fv-rim);--fv-metal:var(--fv-brass)}
:root[data-theme="light"]{--fv-bg:var(--fv-ivory);--fv-high:var(--fv-ivory-lit);--fv-ink:var(--feltbox-ink);--fv-muted:var(--feltbox-light-muted);--fv-structure:var(--fv-rim-light);--fv-metal:var(--feltbox-side-light-light)}