/* ============================================================
   LINKEE DESIGN TOKENS
   Source of truth — import before all other CSS
   Last updated: 31 May 2026
   ============================================================ */

:root {

  /* ── Fonts ────────────────────────────── */
  --font-title: 'Archivo', sans-serif;
  --font-ui:    'Manrope', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

  /* ── Brand (mode-invariant) ──────────── */
  --color-yellow:  #F5C800;
  --color-on-brand: #1C1C1A;
  --color-on-brand-muted: rgba(28, 28, 26, .52);
  --color-pink:    #ed155d;
  --color-orange:  #E8560A;
  --color-warm:    #C8A882;
  --color-pure-white: #ffffff;
  --color-pure-black: #111111;

  /* ── Surfaces ────────────────────────── */
  --color-bg:          #F0ECE0;
  --color-surface:     #FFFFFF;
  --color-surface-alt: #F8F4E8;
  --color-surface-sub: #FDFAF4;
  --color-surface-raised: var(--color-surface-alt);
  --color-on-dark:     #FFFFFF;
  --color-overlay-light: rgba(255, 255, 255, 0.88);
  --color-overlay-dark:  rgba(27, 29, 31, 0.84);

  /* ── Borders ─────────────────────────── */
  --color-border:     #D8D4C4;
  --color-border-dim: #EEE8D8;
  --color-stat-ridge: #C8C4B0;

 /* ── Text ────────────────────────────── */
	--color-ink:        #1C1C1A;
	--color-ink-soft:   #3A3830;   /* slightly softened ink — captions, relaxed emphasis */
	--color-ink-mid:    #6B6860;   /* mid — secondary labels, meta */
	--color-ink-muted:  #9A9690;   /* muted — tertiary, placeholders, icons */
	--color-mid:        #6B6860;
	--color-dim:        #C8C4B0;
	--color-page-title: #1C1C1A;   /* yellow in dark mode */

  /* ── Sage ────────────────────────────── */
  --color-sage:        #C8CEB8;   /* stat cards, mid surfaces */
  --color-sage-mid:    #8A9478;   /* mid-tone: readable on sage or dark surfaces */
  --color-sage-dark:   #6A7258;
  --color-sage-dark-rgb: 106, 114, 88;
  --color-sage-border: #B4BAA4;

  /* ── Header ──────────────────────────── */
  --color-header-bg:   #F5C800;   /* topbar bg — yellow in light */
  --color-header-text: var(--color-on-brand);

  /* ── Drawer ──────────────────────────── */
  --color-drawer-base: #141108;   /* very dark warm — default/light */

  /* ── Semantic ────────────────────────── */
  --color-led-on:   #E8560A;
  --color-led-glow: rgba(232, 86, 10, 0.35);
  --color-live:     #2a9d2a;   /* published / live indicator dot */
  --color-tap:      #E8560A;
  --color-whatsapp: #25D366;

  /* ── Badges ──────────────────────────── */
  --badge-links-bg:    #FFF3CC; --badge-links-text:    #7A5F00; --badge-links-border:    #E8D870;
  --badge-contact-bg:  #FFF0F4; --badge-contact-text:  #C0004A; --badge-contact-border:  #F5C0D0;
  --badge-events-bg:   #EEF4FF; --badge-events-text:   #2A5FA5; --badge-events-border:   #C0D4F5;
  --badge-products-bg: #F0FFF4; --badge-products-text: #1A6B3A; --badge-products-border: #A3DDB8;
  --badge-gallery-bg:  #F5F0FF; --badge-gallery-text:  #5A3A9A; --badge-gallery-border:  #C8B4F0;
  --badge-text-bg:     #F5F5F5; --badge-text-text:     #4A4A4A; --badge-text-border:     #D0D0D0;

  /* ── Spacing ─────────────────────────── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px;  --space-6: 32px;
  --space-7: 40px; --space-8: 48px;  --space-9: 64px;
  --space-0: 0;
  --space-0-5: 2px;
  --space-0-75: 3px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;

  /* ── Layout ───────────────────────────── */
  --block-max:  520px;          /* content column max-width — shared across public, home, stats, blocks */
  --block-max-wide: 600px;      /* public page flex ceiling — blocks widen toward this on larger viewports */
  --store-max:  940px;          /* public store panel max-width at ≥900px viewports (3-col grid) */
  --store-max-wide: 1180px;     /* public store panel max-width at ≥1200px viewports (4-col grid) */
  --homebar-h:   56px;          /* homebar pill height — used in bottom calc() offsets */
  --control-compact-h: 44px;    /* accessible target for compact controls */
  --control-compact-pad-x: var(--space-1); /* visible inset stays tighter than icon/text */
  --control-compact-pad-y: var(--space-1);
  --control-compact-gap: var(--space-1);
  --pill-max:   358px;          /* floating bottom chrome max-width — homebar, setup-notif, snackbar */
  --content-wide-max: 600px;
  --homebar-wide-max: 400px;
  --space-card-gap: var(--space-5);
  --space-section-gap: var(--space-7);
  --line-thin: 1px;
  --line-strong: 1.5px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-soft: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-sunken-avatar: inset 0 3px 7px rgba(0, 0, 0, 0.22), inset 0 -1px 2px rgba(255, 255, 255, 0.28);
  --shadow-sunken-post: inset 0 2px 6px rgba(0, 0, 0, 0.10);
  --shadow-badge-pop: 0 1px 2px rgba(0, 0, 0, 0.3);
  --lift-card: -1px;
  --blur-chrome: 10px;
  --duration-fast: 150ms;
  --ratio-store-media: 3 / 2;

  /* ── Radius ──────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   13px;
  --radius-lg:   15px;
  --radius-xl:   17px;
  --radius-2xl:  25px;
  --radius-full: 9999px;

  /* ── Type scale ──────────────────────── */
  --text-2xs:  9px;   --text-xs:   11px;  --text-sm:  12px;
  --text-base: 14px;  --text-md:   15px;  --text-lg:  17px;
  --text-input: 16px; /* iOS zoom threshold — all form inputs must be ≥16px */
  --text-xl:   26px;  --text-2xl:  36px;  --text-3xl:  48px;

  /* ── Icon scale ──────────────────────── */
  --icon-s:  18px;
  --icon-m:  24px;
  --icon-l:  36px;
  --icon-xl:  46px;
  --icon-store-empty: 32px;
}

/* ── Semantic status aliases ─────────────── */
/* Map to existing palette — no new colors   */
:root {
  --color-success:        #E8560A;             /* healthy — Braun orange LED */
  --color-success-bg:     #FFF0E8;
  --color-success-text:   #B84000;
  --color-success-border: #F5C0A0;

  --color-positive:       #2a9d2a;             /* semantic on/live green — store settings, positive states */

  --color-warning:        #C8A800;             /* degraded — dark amber */
  --color-warning-bg:     #FFF8E0;
  --color-warning-text:   #8A6A00;
  --color-warning-border: #E8D870;

  --color-danger:         #ed155d;             /* error — pink, same as blocked */
  --color-danger-bg:      var(--badge-contact-bg);
  --color-danger-text:    var(--badge-contact-text);
  --color-danger-border:  var(--badge-contact-border);
}

/* ── Color pairing rules (NEVER BREAK) ──────────────────────
   yellow bg       →  --color-on-brand (#1C1C1A, never flips)
   light sage bg   →  --color-on-brand (#1C1C1A, never flips)
   --color-on-brand bg → --color-yellow (#F5C800, always)
   --color-surface →  --color-ink    (flips correctly in dark)
   NEVER use --color-ink for text on yellow/sage backgrounds.
   --color-ink flips to #ECEFF4 in dark mode — wrong on sage/yellow.
   Use --color-on-brand instead; --color-header-text is its legacy alias.
──────────────────────────────────────────────────────────────── */

/* ── Forced light mode — data-theme="light" (Mono Light) ─────
   Pure white surfaces, charcoal ink, neutral gray accents.
   Auto-switches to Nord midnight when OS goes dark.           */
:root[data-theme="light"] {
	--color-bg:          #FFFFFF;
	--color-surface:     #F7F7F7;
	--color-surface-alt: #F2F2F2;
	--color-surface-sub: #FAFAFA;

	--color-border:     #E0E0E0;
	--color-border-dim: #EBEBEB;
	--color-stat-ridge: #C8C8C8;

	--color-ink:        #0A0A0A;
	--color-mid:        #686868;
	--color-dim:        #B0B0B0;
	--color-page-title: #0A0A0A;

	--color-sage:        #D8D8D8;
	--color-sage-mid:    #989898;
	--color-sage-dark:   #686868;
	--color-sage-dark-rgb: 104, 104, 104;
	--color-sage-border: #C0C0C0;

	--color-header-bg:   #F0F0F0;
	--color-header-text: var(--color-on-brand);

	--color-drawer-base: #0A0A0A;

	--color-led-on:   #0A0A0A;
	--color-led-glow: rgba(10, 10, 10, 0.20);
	--color-tap:      #0A0A0A;

	--badge-links-bg:    #F5F5F5; --badge-links-text:    #3A3A3A; --badge-links-border:    #D0D0D0;
	--badge-contact-bg:  #F5F5F5; --badge-contact-text:  #3A3A3A; --badge-contact-border:  #D0D0D0;
	--badge-events-bg:   #F5F5F5; --badge-events-text:   #3A3A3A; --badge-events-border:   #D0D0D0;
	--badge-products-bg: #F5F5F5; --badge-products-text: #3A3A3A; --badge-products-border: #D0D0D0;
	--badge-gallery-bg:  #F5F5F5; --badge-gallery-text:  #3A3A3A; --badge-gallery-border:  #D0D0D0;
	--badge-text-bg:     #F5F5F5; --badge-text-text:     #3A3A3A; --badge-text-border:     #D0D0D0;
}

/* ── Warm — data-theme="warm" (Nord Aurora) ──────────────────
   Warm parchment base, Aurora amber header, earthy accents.
   Auto-switches to Nord midnight when OS goes dark.           */
:root[data-theme="warm"] {
	--color-bg:          #FDF3EE;
	--color-surface:     #FFFAF8;
	--color-surface-alt: #FAF0EB;
	--color-surface-sub: #FEF8F5;

	--color-border:     #EED8D0;
	--color-border-dim: #F5E8E3;
	--color-stat-ridge: #D8B8B0;

	--color-ink:        #2A1A16;
	--color-mid:        #7A5850;
	--color-dim:        #C8ACA4;
	--color-page-title: #2A1A16;

	--color-sage:        #D8C8C0;
	--color-sage-mid:    #9A7A6A;
	--color-sage-dark:   #8A6A5A;
	--color-sage-dark-rgb: 138, 106, 90;
	--color-sage-border: #C4B0A4;

	--color-header-bg:   #EBCB8B;
	--color-header-text: var(--color-on-brand);

	--color-drawer-base: #110807;   /* dark terracotta */

	--color-led-on:   #BF616A;
	--color-led-glow: rgba(191, 97, 106, 0.35);
	--color-tap:      #D08770;

	--badge-links-bg:    #FFF8EC; --badge-links-text:    #8A5A00; --badge-links-border:    #EBCB8B;
	--badge-contact-bg:  #FFF0F2; --badge-contact-text:  #9A1830; --badge-contact-border:  #F0B0B8;
	--badge-events-bg:   #F0F4FF; --badge-events-text:   #2A4A8A; --badge-events-border:   #B0C0E8;
	--badge-products-bg: #F0FFF4; --badge-products-text: #1A5A30; --badge-products-border: #A3BE8C;
	--badge-gallery-bg:  #F8F0FF; --badge-gallery-text:  #5A2A8A; --badge-gallery-border:  #C0A0E0;
	--badge-text-bg:     #F5F0EE; --badge-text-text:     #5A4038; --badge-text-border:     #D0C0B8;
}

/* ── Slate — data-theme="slate" (Nord Frost) ─────────────────
   Cool blue-gray base, Frost sky header, gentle teal accents.
   Auto-switches to Nord midnight when OS goes dark.           */
:root[data-theme="slate"] {
	--color-bg:          #E8EEF4;
	--color-surface:     #F4F7FA;
	--color-surface-alt: #EEF3F8;
	--color-surface-sub: #F8FAFB;

	--color-border:     #C0D0DC;
	--color-border-dim: #D8E4EE;
	--color-stat-ridge: #A8C0D0;

	--color-ink:        #2A3848;
	--color-mid:        #5A7088;
	--color-dim:        #98B0C4;
	--color-page-title: #2A3848;

	--color-sage:        #B8D0D8;
	--color-sage-mid:    #6A8C9C;
	--color-sage-dark:   #4A6878;
	--color-sage-dark-rgb: 74, 104, 120;
	--color-sage-border: #9CC0CC;

	--color-header-bg:   #88C0D0;
	--color-header-text: var(--color-on-brand);

	--color-drawer-base: #091018;   /* dark slate blue */

	--color-led-on:   #5E81AC;
	--color-led-glow: rgba(94, 129, 172, 0.35);
	--color-tap:      #81A1C1;

	--badge-links-bg:    #FFF8E0; --badge-links-text:    #7A5F00; --badge-links-border:    #E8D870;
	--badge-contact-bg:  #FFF0F4; --badge-contact-text:  #C0004A; --badge-contact-border:  #F5C0D0;
	--badge-events-bg:   #EAF0FF; --badge-events-text:   #2050A0; --badge-events-border:   #A8C4F0;
	--badge-products-bg: #E8F8F0; --badge-products-text: #186040; --badge-products-border: #88C8A8;
	--badge-gallery-bg:  #F0EAFF; --badge-gallery-text:  #5028A0; --badge-gallery-border:  #C0A0F0;
	--badge-text-bg:     #EEF2F5; --badge-text-text:     #3A4A58; --badge-text-border:     #C0CCD8;
}

/* ── Dusk — data-theme="dusk" (Nord Aurora violet) ───────────
   Soft lavender parchment, Aurora purple header.
   Auto-switches to Nord midnight when OS goes dark.           */
:root[data-theme="dusk"] {
	--color-bg:          #F6F0F8;
	--color-surface:     #FCFAFD;
	--color-surface-alt: #F2EAF6;
	--color-surface-sub: #FAF6FB;

	--color-border:     #E0D0E8;
	--color-border-dim: #EDE4F2;
	--color-stat-ridge: #C8B0D4;

	--color-ink:        #2A1A2E;
	--color-mid:        #7A5A80;
	--color-dim:        #C4A8C8;
	--color-page-title: #2A1A2E;

	--color-sage:        #D8C8D8;
	--color-sage-mid:    #9A7A9A;
	--color-sage-dark:   #7A5A7A;
	--color-sage-dark-rgb: 122, 90, 122;
	--color-sage-border: #C4B0C8;

	--color-header-bg:   #B48EAD;
	--color-header-text: var(--color-on-brand);

	--color-drawer-base: #120810;   /* deep violet night */

	--color-led-on:   #B48EAD;
	--color-led-glow: rgba(180, 142, 173, 0.35);
	--color-tap:      #BF616A;

	--badge-links-bg:    #FFF8EC; --badge-links-text:    #8A5A00; --badge-links-border:    #EBCB8B;
	--badge-contact-bg:  #FFF0F4; --badge-contact-text:  #9A1848; --badge-contact-border:  #F0B0C8;
	--badge-events-bg:   #F0F4FF; --badge-events-text:   #2A4A8A; --badge-events-border:   #B0C0E8;
	--badge-products-bg: #F0FFF4; --badge-products-text: #1A5A30; --badge-products-border: #A3BE8C;
	--badge-gallery-bg:  #F8F0FF; --badge-gallery-text:  #5A2A8A; --badge-gallery-border:  #C0A0E0;
	--badge-text-bg:     #F5F0F6; --badge-text-text:     #5A4058; --badge-text-border:     #D0C0D0;
}

/* ── Fjord — data-theme="fjord" (Nord Frost deep blue) ───────
   Cool blue paper, Frost deep header (deeper than Slate cyan).
   Auto-switches to Nord midnight when OS goes dark.           */
:root[data-theme="fjord"] {
	--color-bg:          #EAF0F8;
	--color-surface:     #F5F8FC;
	--color-surface-alt: #E8EEF6;
	--color-surface-sub: #F8FAFD;

	--color-border:     #C0D0E4;
	--color-border-dim: #D8E4F0;
	--color-stat-ridge: #A0B8D4;

	--color-ink:        #1E2A3C;
	--color-mid:        #4A6280;
	--color-dim:        #90A8C0;
	--color-page-title: #1E2A3C;

	--color-sage:        #B0C8E0;
	--color-sage-mid:    #5A7A9C;
	--color-sage-dark:   #3A5A7C;
	--color-sage-dark-rgb: 58, 90, 124;
	--color-sage-border: #90B0CC;

	--color-header-bg:   #5E81AC;
	--color-header-text: var(--color-on-brand);

	--color-drawer-base: #081018;   /* deep fjord blue */

	--color-led-on:   #5E81AC;
	--color-led-glow: rgba(94, 129, 172, 0.35);
	--color-tap:      #81A1C1;

	--badge-links-bg:    #FFF8E0; --badge-links-text:    #7A5F00; --badge-links-border:    #E8D870;
	--badge-contact-bg:  #FFF0F4; --badge-contact-text:  #C0004A; --badge-contact-border:  #F5C0D0;
	--badge-events-bg:   #EAF0FF; --badge-events-text:   #2050A0; --badge-events-border:   #A8C4F0;
	--badge-products-bg: #E8F8F0; --badge-products-text: #186040; --badge-products-border: #88C8A8;
	--badge-gallery-bg:  #F0EAFF; --badge-gallery-text:  #5028A0; --badge-gallery-border:  #C0A0F0;
	--badge-text-bg:     #EEF2F5; --badge-text-text:     #3A4A58; --badge-text-border:     #C0CCD8;
}

/* ════════════════════════════════════════
   DARK MODE — Nord Polar Night base
   Applies to ALL page themes.
   Placed LAST so it overrides forced light themes above
   when OS/browser prefers dark. Accessibility, not cosmetics.
════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-force-light]) {

	/* ── Surfaces — pure Nord ─────────── */
	--color-bg:          #2E3440;
	--color-surface:     #3B4252;
	--color-surface-alt: #2E3440;
	--color-surface-sub: #2E3440;

	/* ── Borders — Nord ──────────────── */
	--color-border:     #434C5E;
	--color-border-dim: #3B4252;
	--color-stat-ridge: #434C5E;

	/* ── Text — Nord Snow ────────────── */
	--color-ink:        #ECEFF4;
	--color-ink-soft:   #C8CCD8;   /* slightly softened snow */
	--color-ink-mid:    #8892A4;   /* mid — secondary labels, meta */
	--color-ink-muted:  #6A7488;   /* muted — tertiary, icons */
	--color-mid:        #8892A4;   /* readable secondary text on dark bg */
	--color-dim: 		#7A8699;   /* dark mode — readable but still secondary */
	--color-page-title: #F5C800;   /* brand yellow — subtle nod */

	/* ── Sage — stat cards unchanged ─── */
	--color-sage:        #C8CEB8;   /* same as light — stat card bg */
	--color-sage-mid:    #7A8670;   /* mid-tone on sage: readable on both sage and dark bg */
	--color-sage-dark:   #4A5238;
	--color-sage-dark-rgb: 106, 114, 88;
	--color-sage-border: #A8B298;

	/* ── Header — yellow topbar in dark ─ */
	--color-header-bg:   #F5C800;
	--color-header-text: var(--color-on-brand);

	/* ── Drawer ──────────────────────── */
	--color-drawer-base: #161B22;   /* deep Nord polar night */

	/* ── Semantic ────────────────────── */
	--color-led-glow: rgba(232, 86, 10, 0.5);

	/* ── Badges — dark adjusted ──────── */
	--badge-links-bg:    #2A2500; --badge-links-text:    #F5C800; --badge-links-border:    #4A4200;
	--badge-contact-bg:  #2A0A12; --badge-contact-text:  #F58AB0; --badge-contact-border:  #5A1828;
	--badge-events-bg:   #0A1428; --badge-events-text:   #88B4F0; --badge-events-border:   #182848;
	--badge-products-bg: #0A2018; --badge-products-text: #7AD4A8; --badge-products-border: #184030;
	--badge-gallery-bg:  #180A30; --badge-gallery-text:  #C8A4F8; --badge-gallery-border:  #3A1860;
	--badge-text-bg:     #1E1E1E; --badge-text-text:     #A0A090; --badge-text-border:     #383830;
  }
}

/* ── Forced Nord dark — explicit toggle by OS-light users ──────────────────
   Mirrors the @media block above. Applied via JS data-force-dark attribute;
   never persisted as the page theme.
   ──────────────────────────────────────────────────────────────────────── */
:root[data-force-dark] {
	--color-bg:          #2E3440;
	--color-surface:     #3B4252;
	--color-surface-alt: #2E3440;
	--color-surface-sub: #2E3440;
	--color-border:     #434C5E;
	--color-border-dim: #3B4252;
	--color-stat-ridge: #434C5E;
	--color-ink:        #ECEFF4;
	--color-ink-soft:   #C8CCD8;
	--color-ink-mid:    #8892A4;
	--color-ink-muted:  #6A7488;
	--color-mid:        #8892A4;
	--color-dim:        #7A8699;
	--color-page-title: #F5C800;
	--color-sage:        #C8CEB8;
	--color-sage-mid:    #7A8670;
	--color-sage-dark:   #4A5238;
	--color-sage-dark-rgb: 106, 114, 88;
	--color-sage-border: #A8B298;
	--color-header-bg:   #F5C800;
	--color-header-text: var(--color-on-brand);
	--color-drawer-base: #161B22;
	--color-led-glow: rgba(232, 86, 10, 0.5);
	--badge-links-bg:    #2A2500; --badge-links-text:    #F5C800; --badge-links-border:    #4A4200;
	--badge-contact-bg:  #2A0A12; --badge-contact-text:  #F58AB0; --badge-contact-border:  #5A1828;
	--badge-events-bg:   #0A1428; --badge-events-text:   #88B4F0; --badge-events-border:   #182848;
	--badge-products-bg: #0A2018; --badge-products-text: #7AD4A8; --badge-products-border: #184030;
	--badge-gallery-bg:  #180A30; --badge-gallery-text:  #C8A4F8; --badge-gallery-border:  #3A1860;
	--badge-text-bg:     #1E1E1E; --badge-text-text:     #A0A090; --badge-text-border:     #383830;
}

html[lang="zh-CN"] {
	--font-ui: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
	--font-title: var(--font-ui);
}