/* ==========================================================================
   BaseCore — Skyer Unified Design System v1.0
   Shared across: BaseCore Shell, Chat (Zulip), Task (Kaneo), Drive (OpenCloud),
                  Mail (Zero), Force (3D Visual Loop)
   Palette:
     - Warm Alabaster Ivory (Light) / Deep Carbon Obsidian (Dark)
     - Warm Ember Accent (#F8A87C / #EA580C)
     - Typography: Onest, Inter, JetBrains Mono (Self-Hosted WOFF2)
   ========================================================================== */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-normal-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Canonical Skyer Design Tokens (Light = Warm Alabaster, Dark = Carbon)
   -------------------------------------------------------------------------- */
:root,
html.light,
html[data-theme="light"],
html[data-color-scheme="light"] {
  --skyer-font-sans: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --skyer-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --skyer-bg-page: #FFFDF9;
  --skyer-bg-sidebar: #F8F3ED;
  --skyer-bg-card: #FFFFFF;
  --skyer-bg-subtle: #F3ECE2;
  --skyer-bg-hover: #EFE8DD;
  --skyer-bg-active: #E6DDCF;
  --skyer-border: #ECE5DC;
  --skyer-border-strong: #DCD3C7;
  --skyer-text-primary: #252522;
  --skyer-text-secondary: #78716C;
  --skyer-text-muted: #A8A29E;
  --skyer-accent: #F8A87C;
  --skyer-accent-strong: #EA580C;
  --skyer-accent-ink: #C2540A;
  --skyer-radius-sm: 6px;
  --skyer-radius-md: 8px;
  --skyer-radius-lg: 10px;

  /* Kaneo & Zero Shadcn/Tailwind v4 Token Bridge (Light) */
  --font-sans: var(--skyer-font-sans) !important;
  --font-heading: var(--skyer-font-sans) !important;
  --font-mono: var(--skyer-font-mono) !important;
  --font-geist-sans: var(--skyer-font-sans) !important;
  --font-geist-mono: var(--skyer-font-mono) !important;
  --default-font-family: var(--skyer-font-sans) !important;
  --default-mono-font-family: var(--skyer-font-mono) !important;
  --background: #FFFDF9 !important;
  --foreground: #252522 !important;
  --card: #FFFFFF !important;
  --card-foreground: #252522 !important;
  --popover: #FFFFFF !important;
  --popover-foreground: #252522 !important;
  --primary: #252522 !important;
  --primary-foreground: #FFFDF9 !important;
  --secondary: #F3ECE2 !important;
  --secondary-foreground: #252522 !important;
  --muted: #F3ECE2 !important;
  --muted-foreground: #78716C !important;
  --accent: #EFE8DD !important;
  --accent-foreground: #252522 !important;
  --border: #ECE5DC !important;
  --input: #E6DDCF !important;
  --ring: #F8A87C !important;
  --sidebar: #F8F3ED !important;
  --sidebar-background: #F8F3ED !important;
  --sidebar-foreground: #252522 !important;
  --sidebar-primary: #EA580C !important;
  --sidebar-primary-foreground: #FFFDF9 !important;
  --sidebar-accent: #EFE8DD !important;
  --sidebar-accent-foreground: #252522 !important;
  --sidebar-border: #ECE5DC !important;
  --sidebar-ring: #F8A87C !important;
  --panel: #FFFFFF !important;
  --lightBackground: #FFFDF9 !important;
  --offsetLight: #F8F3ED !important;
  --panelLight: #FFFFFF !important;
  --board-lane: #F8F3ED !important;
  --board-card: #FFFFFF !important;
  --board-card-border: #ECE5DC !important;
  --board-card-border-hover: #F8A87C !important;
  --board-card-selected: #F3ECE2 !important;
  --board-card-selected-border: #EA580C !important;
  --board-title: #252522 !important;
  --board-id: #78716C !important;
  --radius: 0.5rem !important;

  /* OpenCloud Drive Token Bridge (Light) */
  --oc-font-family: var(--skyer-font-sans) !important;
  --oc-role-background: #FFFDF9 !important;
  --oc-role-on-background: #252522 !important;
  --oc-role-surface: #FFFFFF !important;
  --oc-role-on-surface: #252522 !important;
  --oc-role-surface-variant: #F3ECE2 !important;
  --oc-role-on-surface-variant: #78716C !important;
  --oc-role-surface-container-lowest: #FFFFFF !important;
  --oc-role-surface-container-low: #FFFDF9 !important;
  --oc-role-surface-container: #F8F3ED !important;
  --oc-role-surface-container-high: #F3ECE2 !important;
  --oc-role-surface-container-highest: #EFE8DD !important;
  --oc-role-primary: #F8A87C !important;
  --oc-role-on-primary: #252522 !important;
  --oc-role-primary-container: #F3ECE2 !important;
  --oc-role-on-primary-container: #C2540A !important;
  --oc-role-secondary: #252522 !important;
  --oc-role-on-secondary: #FFFDF9 !important;
  --oc-role-secondary-container: #EFE8DD !important;
  --oc-role-on-secondary-container: #252522 !important;
  --oc-role-outline: #DCD3C7 !important;
  --oc-role-outline-variant: #ECE5DC !important;
  --oc-role-chrome: #F8F3ED !important;
  --oc-role-on-chrome: #252522 !important;
}

/* --------------------------------------------------------------------------
   2. Dark Mode Tokens (Deep Carbon Obsidian + Warm Ember)
   -------------------------------------------------------------------------- */
html.dark,
html.dark-theme,
html[data-theme="dark"],
html[data-color-scheme="dark"],
.dark {
  --skyer-bg-page: #080A0F;
  --skyer-bg-sidebar: #0D0D12;
  --skyer-bg-card: #12121A;
  --skyer-bg-subtle: #181822;
  --skyer-bg-hover: #1E1E2A;
  --skyer-bg-active: #282838;
  --skyer-border: #1C1C26;
  --skyer-border-strong: #2A2A38;
  --skyer-text-primary: #ECEEF2;
  --skyer-text-secondary: #9CA3AF;
  --skyer-text-muted: #6B7280;
  --skyer-accent: #F8A87C;
  --skyer-accent-strong: #F6935C;
  --skyer-accent-ink: #F8A87C;

  /* Kaneo & Zero Shadcn/Tailwind v4 Token Bridge (Dark) */
  --background: #080A0F !important;
  --foreground: #ECEEF2 !important;
  --card: #12121A !important;
  --card-foreground: #ECEEF2 !important;
  --popover: #12121A !important;
  --popover-foreground: #ECEEF2 !important;
  --primary: #F8A87C !important;
  --primary-foreground: #18181B !important;
  --secondary: #181822 !important;
  --secondary-foreground: #ECEEF2 !important;
  --muted: #181822 !important;
  --muted-foreground: #9CA3AF !important;
  --accent: #1E1E2A !important;
  --accent-foreground: #ECEEF2 !important;
  --border: #1C1C26 !important;
  --input: #1E1E2A !important;
  --ring: #F8A87C !important;
  --sidebar: #0D0D12 !important;
  --sidebar-background: #0D0D12 !important;
  --sidebar-foreground: #ECEEF2 !important;
  --sidebar-primary: #F8A87C !important;
  --sidebar-primary-foreground: #18181B !important;
  --sidebar-accent: #1E1E2A !important;
  --sidebar-accent-foreground: #ECEEF2 !important;
  --sidebar-border: #1C1C26 !important;
  --sidebar-ring: #F8A87C !important;
  --panel: #12121A !important;
  --darkBackground: #080A0F !important;
  --offsetDark: #0D0D12 !important;
  --panelDark: #12121A !important;
  --board-lane: #0D0D12 !important;
  --board-card: #12121A !important;
  --board-card-border: #1C1C26 !important;
  --board-card-border-hover: #F8A87C !important;
  --board-card-selected: #181822 !important;
  --board-card-selected-border: #F8A87C !important;
  --board-title: #ECEEF2 !important;
  --board-id: #9CA3AF !important;

  /* OpenCloud Drive Token Bridge (Dark) */
  --oc-role-background: #080A0F !important;
  --oc-role-on-background: #ECEEF2 !important;
  --oc-role-surface: #12121A !important;
  --oc-role-on-surface: #ECEEF2 !important;
  --oc-role-surface-variant: #181822 !important;
  --oc-role-on-surface-variant: #9CA3AF !important;
  --oc-role-surface-container-lowest: #080A0F !important;
  --oc-role-surface-container-low: #0D0D12 !important;
  --oc-role-surface-container: #12121A !important;
  --oc-role-surface-container-high: #181822 !important;
  --oc-role-surface-container-highest: #1E1E2A !important;
  --oc-role-primary: #F8A87C !important;
  --oc-role-on-primary: #18181B !important;
  --oc-role-primary-container: #28201D !important;
  --oc-role-on-primary-container: #F8A87C !important;
  --oc-role-secondary: #ECEEF2 !important;
  --oc-role-on-secondary: #12121A !important;
  --oc-role-secondary-container: #1E1E2A !important;
  --oc-role-on-secondary-container: #ECEEF2 !important;
  --oc-role-outline: #2A2A38 !important;
  --oc-role-outline-variant: #1C1C26 !important;
  --oc-role-chrome: #0D0D12 !important;
  --oc-role-on-chrome: #ECEEF2 !important;
}

/* --------------------------------------------------------------------------
   3. Global Typography, Scrollbars & Skyer Surface Refinements
   -------------------------------------------------------------------------- */
html, body {
  font-family: var(--skyer-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, kbd, samp {
  font-family: var(--skyer-font-mono) !important;
}

/* Thin Skyer Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--skyer-border-strong) transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--skyer-border-strong);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--skyer-accent);
}

/* --------------------------------------------------------------------------
   4. Zulip (BaseCore Chat) Skyer Pattern Overrides
   -------------------------------------------------------------------------- */
:root {
  --color-background: light-dark(#FFFDF9, #080A0F);
  --color-background-navbar: light-dark(#F8F3ED, #0D0D12);
  --color-background-stream-message-content: light-dark(#FFFFFF, #12121A);
  --color-background-private-message-content: light-dark(#FFFDF9, #12121A);
  --color-background-private-message-header: light-dark(#F3ECE2, #181822);
  --color-background-popover: light-dark(#FFFFFF, #12121A);
  --color-background-search: light-dark(#FFFFFF, #181822);
  --color-border-sidebar: light-dark(#ECE5DC, #1C1C26);
  --color-navbar-bottom-border: light-dark(#ECE5DC, #1C1C26);
  --color-text-default: light-dark(#252522, #ECEEF2);
  --color-text-sidebar-row: light-dark(#252522, #ECEEF2);
  --color-unread-marker: #F8A87C;
}

body #navbar-container,
body #header-container,
body .header-main {
  background: var(--skyer-bg-sidebar) !important;
  border-bottom: 1px solid var(--skyer-border) !important;
}

body #left-sidebar-container,
body #right-sidebar-container {
  background: var(--skyer-bg-sidebar) !important;
  border-color: var(--skyer-border) !important;
}

body .app-main,
body .column-middle,
body #message_feed_container {
  background: var(--skyer-bg-page) !important;
}

body #compose-content {
  background: var(--skyer-bg-card) !important;
  border: 1px solid var(--skyer-border) !important;
  border-radius: var(--skyer-radius-md) !important;
}

/* --------------------------------------------------------------------------
   5. Component-Level Skyer Overrides (Kaneo, Zero, OpenCloud, Zulip, Force)
   -------------------------------------------------------------------------- */
/* Zero Mail & Kaneo primary buttons (#006FFE -> Skyer Warm Ember #EA580C / #F8A87C) */
.bg-\[\#006FFE\],
button.bg-\[\#006FFE\] {
  background-color: var(--skyer-accent-strong) !important;
  border-color: transparent !important;
  color: #FFFDF9 !important;
  font-weight: 600 !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}
html.dark .bg-\[\#006FFE\],
html.dark button.bg-\[\#006FFE\] {
  background-color: var(--skyer-accent) !important;
  color: #18181B !important;
}
.bg-\[\#006FFE\]:hover,
button.bg-\[\#006FFE\]:hover {
  filter: brightness(1.06);
}

/* OpenCloud Top Bar & Navigation Chrome */
#oc-topbar,
.oc-topbar,
header.oc-navbar {
  background-color: var(--skyer-bg-sidebar) !important;
  border-bottom: 1px solid var(--skyer-border) !important;
}
.oc-sidebar,
#app-navigation,
aside.oc-sidebar-nav {
  background-color: var(--skyer-bg-sidebar) !important;
  border-right: 1px solid var(--skyer-border) !important;
}
.oc-card,
.oc-modal,
.oc-drop {
  background-color: var(--skyer-bg-card) !important;
  border-color: var(--skyer-border) !important;
  border-radius: var(--skyer-radius-md) !important;
}

/* BaseCore Force HUD Skyer Theme */
:root {
  --bg0: #080A0F !important;
  --bg1: #0D0D12 !important;
  --bg2: #12121A !important;
  --bg3: #181822 !important;
  --line: #1C1C26 !important;
  --gold: #F8A87C !important;
  --gold2: #F6935C !important;
  --goldd: #5C341D !important;
  --ink: #ECEEF2 !important;
  --ink2: #D1D5DB !important;
  --mut: #9CA3AF !important;
  --teal: #10B981 !important;
  --hd: "Onest", "Inter", system-ui, sans-serif !important;
  --tx: "Onest", "Inter", system-ui, sans-serif !important;
}
html.light, html[data-theme="light"] {
  --bg0: #FFFDF9 !important;
  --bg1: #F8F3ED !important;
  --bg2: #FFFFFF !important;
  --bg3: #F3ECE2 !important;
  --line: #ECE5DC !important;
  --gold: #EA580C !important;
  --gold2: #C2540A !important;
  --goldd: #DCD3C7 !important;
  --ink: #252522 !important;
  --ink2: #44403C !important;
  --mut: #78716C !important;
  --teal: #059669 !important;
}