/* ═════════════════════════════════════════════════════════════════════
   Kinetic Design System — "Forward Motion" v2.0
   Harmonized Dark + Light themes. One set of semantic tokens,
   appropriate contrast for each mode.

   Dark:  #031427 background, #ffb693 accent, #95d3ba secondary
   Light: #fcf9f8 background, #ff8533 accent, #5d5f5f secondary
   ═════════════════════════════════════════════════════════════════════ */

/* ── Light Theme (default) ── */
:root {
  --color-background: #fcf9f8;
  --color-surface: #fcf9f8;
  --color-surface-dim: #dcd9d9;
  --color-surface-container: #f0eded;
  --color-surface-container-low: #f6f3f2;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-high: #eae7e7;
  --color-surface-container-highest: #e5e2e1;
  --color-surface-variant: #e5e2e1;
  --color-surface-bright: #fcf9f8;

  --color-on-background: #1c1b1b;
  --color-on-surface: #1c1b1b;
  --color-on-surface-variant: #574237;

  /* 62.1: deepened from #ff8533 so primary-as-text keeps >= 4.5:1 on
     surface containers (AA). Container/fixed tones keep the bright orange. */
  --color-primary: #b34700;
  --color-on-primary: #ffffff;
  --color-primary-container: #ff8533;
  --color-on-primary-container: #652b00;
  --color-primary-fixed: #ffdbc9;
  --color-primary-fixed-dim: #ffb68d;
  --color-on-primary-fixed: #331200;
  --color-on-primary-fixed-variant: #763300;

  --color-secondary: #5d5f5f;
  --color-secondary-container: #dfe0e0;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #616363;
  --color-secondary-fixed: #e2e2e2;
  --color-secondary-fixed-dim: #c6c6c7;

  --color-tertiary: #006783;
  --color-tertiary-container: #00b4e4;
  --color-on-tertiary: #ffffff;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;

  /* Status colours (Epic 65.9) — semantic greens/ambers that keep real
     contrast in LIGHT mode. Never alias these to --color-secondary:
     the light secondary is a grey (#5d5f5f), which made "online" dots
     render grey instead of green. */
  --color-success: #0a7d4f;          /* 4.9:1 on background */
  --color-success-container: #d3f2e2;
  --color-on-success-container: #06442c;
  --color-warning: #9a5b00;
  --color-warning-container: #ffe3bd;
  --color-on-warning-container: #4a2b00;

  /* Presence/status states (Epic 62.1) — semantic tokens so components
     reference states, not raw colours. Each value keeps >= 4.5:1 on surface
     containers (#f0eded) and background (#fcf9f8) in LIGHT mode. */
  --state-online: #0a7449;   /* AA green (darker sibling of --color-success) */
  --state-offline: #5d5f5f;  /* readable grey (secondary family) */
  --state-busy: #9a5b00;     /* amber (warning family) */
  --state-idle: #44474e;     /* dark neutral */

  --color-outline: #8a7265;
  --color-outline-variant: #dec1b2;

  --color-inverse-surface: #313030;
  --color-inverse-on-surface: #f3f0ef;
  --color-inverse-primary: #ffb68d;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-gutter: 24px;
  --space-margin: 32px;
  --space-margin-desktop: 40px;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Dark Theme ── */
.dark,
[data-theme="dark"] {
  --color-background: #031427;
  --color-surface: #031427;
  --color-surface-dim: #031427;
  --color-surface-container: #102034;
  --color-surface-container-low: #0b1c30;
  --color-surface-container-lowest: #000f21;
  --color-surface-container-high: #1b2b3f;
  --color-surface-container-highest: #26364a;
  --color-surface-variant: #26364a;
  --color-surface-bright: #2a3a4f;

  --color-on-background: #d3e4fe;
  --color-on-surface: #d3e4fe;
  --color-on-surface-variant: #e2bfb0;

  --color-primary: #ffb693;
  --color-on-primary: #561f00;
  --color-primary-container: #ff6b00;
  --color-on-primary-container: #572000;
  --color-primary-fixed: #ffdbcc;
  --color-primary-fixed-dim: #ffb693;
  --color-on-primary-fixed: #351000;
  --color-on-primary-fixed-variant: #7a3000;

  --color-secondary: #95d3ba;
  --color-secondary-container: #0b513d;
  --color-on-secondary: #003829;
  --color-on-secondary-container: #83c2a9;
  --color-secondary-fixed: #b0f0d6;
  --color-secondary-fixed-dim: #95d3ba;

  --color-tertiary: #bec6e0;
  --color-tertiary-container: #9198b1;
  --color-on-tertiary: #283044;

  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error: #690005;
  --color-on-error-container: #ffdad6;

  /* Status colours (Epic 65.9) — dark-mode counterparts. */
  --color-success: #63d8a4;          /* 10.5:1 on background */
  --color-success-container: #0b513d;
  --color-on-success-container: #c9f5e0;
  --color-warning: #ffca7a;
  --color-warning-container: #5e3c00;
  --color-on-warning-container: #ffd9a8;

  /* Presence/status states (Epic 62.1) — dark-mode counterparts, each
     >= 4.5:1 on surface containers (#102034) and background (#031427). */
  --state-online: #63d8a4;   /* bright green (success family) */
  --state-offline: #8fa3b8;  /* readable blue-grey */
  --state-busy: #ffca7a;     /* soft amber (warning family) */
  --state-idle: #7d8fa5;     /* dimmed neutral */

  --color-outline: #a98a7d;
  --color-outline-variant: #5a4136;

  --color-inverse-surface: #d3e4fe;
  --color-inverse-on-surface: #213145;
  --color-inverse-primary: #a04100;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background-color:var(--color-background);color:var(--color-on-background);line-height:1.5;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}

/* ── Typography ── */
.display-lg{font-family:var(--font-display);font-size:48px;line-height:56px;letter-spacing:-.02em;font-weight:700}
.headline-lg{font-family:var(--font-display);font-size:32px;line-height:40px;letter-spacing:-.01em;font-weight:600}
.headline-lg-mobile{font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:600}
.title-md{font-family:var(--font-display);font-size:20px;line-height:28px;font-weight:600}
.body-lg{font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:400}
.body-md{font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:400}
.label-md{font-family:var(--font-body);font-size:14px;line-height:20px;letter-spacing:.05em;font-weight:500}
.label-sm{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:600}
.mono{font-family:var(--font-mono)}

/* ── Material Symbols ── */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;display:inline-block;line-height:1}
.material-symbols-filled{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* ── Scrollbar ── */
.custom-scrollbar::-webkit-scrollbar{width:4px;height:4px}
.custom-scrollbar::-webkit-scrollbar-track{background:transparent}
.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--color-outline-variant);border-radius:10px}
.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}

/* ── Semantic Color Utilities ── */
.bg-background{background-color:var(--color-background)}
.bg-surface{background-color:var(--color-surface)}
.bg-surface-dim{background-color:var(--color-surface-dim)}
.bg-surface-container{background-color:var(--color-surface-container)}
.bg-surface-container-low{background-color:var(--color-surface-container-low)}
.bg-surface-container-lowest{background-color:var(--color-surface-container-lowest)}
.bg-surface-container-high{background-color:var(--color-surface-container-high)}
.bg-surface-container-highest{background-color:var(--color-surface-container-highest)}
.bg-surface-variant{background-color:var(--color-surface-variant)}
.bg-surface-bright{background-color:var(--color-surface-bright)}
.bg-inverse-surface{background-color:var(--color-inverse-surface)}

.text-primary{color:var(--color-primary)}
.text-on-primary{color:var(--color-on-primary)}
.text-on-background{color:var(--color-on-background)}
.text-on-surface{color:var(--color-on-surface)}
.text-on-surface-variant{color:var(--color-on-surface-variant)}
.text-secondary{color:var(--color-secondary)}
.text-tertiary{color:var(--color-tertiary)}
.text-error{color:var(--color-error)}
.text-inverse-on-surface{color:var(--color-inverse-on-surface)}

.bg-primary{background-color:var(--color-primary)}
.bg-primary-container{background-color:var(--color-primary-container)}
.bg-secondary{background-color:var(--color-secondary)}
.bg-secondary-container{background-color:var(--color-secondary-container)}
.bg-tertiary-container{background-color:var(--color-tertiary-container)}
.bg-error{background-color:var(--color-error)}
.bg-error-container{background-color:var(--color-error-container)}

.text-on-primary-container{color:var(--color-on-primary-container)}
.text-on-secondary-container{color:var(--color-on-secondary-container)}

.border-outline{border-color:var(--color-outline)}
.border-outline-variant{border-color:var(--color-outline-variant)}

/* ── Radius ── */
.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}

/* ── Spacing ── */
.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.gap-gutter{gap:var(--space-gutter)}
.p-xs{padding:var(--space-xs)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}.p-margin{padding:var(--space-margin)}
.px-margin{padding-left:var(--space-margin);padding-right:var(--space-margin)}
.px-gutter{padding-left:var(--space-gutter);padding-right:var(--space-gutter)}
.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}
.py-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}
.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}
.mt-xl{margin-top:var(--space-xl)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-auto{margin-top:auto}

/* ── Layout ── */
.flex-center{display:flex;align-items:center;justify-content:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ── Animations ── */
@media (prefers-reduced-motion:no-preference){
  .kinetic-swoosh{transition:all .4s cubic-bezier(.4,0,.2,1.4)}
  .kinetic-swoosh:hover{transform:translateX(4px)}
  .forward-nudge:hover{transform:translateX(4px);transition:transform .2s cubic-bezier(.4,0,.2,1.4)}
  .kinetic-pulse{animation:kinetic-pulse-anim 3s infinite cubic-bezier(.4,0,.2,1)}
  @keyframes kinetic-pulse-anim{0%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(255,182,147,.4)}50%{transform:scale(1.03);opacity:.9;box-shadow:0 0 0 15px rgba(255,182,147,0)}100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(255,182,147,0)}}
  @keyframes kinetic-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.95)}}
  .sparkline-path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw-line 2s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes draw-line{to{stroke-dashoffset:0}}
  .forward-slide{animation:slideIn .4s cubic-bezier(.4,0,.2,1.4) forwards}
  @keyframes slideIn{from{transform:translateX(-10px);opacity:0}to{transform:translateX(0);opacity:1}}
  .message-flash{animation:msg-flash 2s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes msg-flash{0%{background-color:rgba(255,107,0,.15);border-color:rgba(255,107,0,.3)}100%{background-color:transparent;border-color:transparent}}
  .bar-sweep{transform-origin:bottom;animation:bar-reveal 1.5s cubic-bezier(.4,0,.2,1) forwards;clip-path:inset(100% 0 0 0)}
  @keyframes bar-reveal{to{clip-path:inset(0% 0 0 0)}}
  .particle-loader{height:2px;width:100%;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);background-size:200% 100%;animation:particle-sweep 1.5s linear infinite}
  @keyframes particle-sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .traveling-dot{width:4px;height:4px;background-color:var(--color-primary);border-radius:50%;position:absolute;bottom:-1px;left:0;animation:travel 3s cubic-bezier(.4,0,.2,1) infinite;display:none;box-shadow:0 0 10px var(--color-primary)}
  @keyframes travel{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
}

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

/* ── Nav ── */
.nav-item{position:relative}
.active-rail-item{border-left:4px solid var(--color-primary);background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 100%)}
.nav-underline{position:absolute;bottom:-2px;left:0;height:2px;background-color:var(--color-primary);transition:all .3s cubic-bezier(.4,0,.2,1)}
/* ── Chat bubbles ── */
.chat-bubble-assistant{background-color:var(--color-primary-container);color:var(--color-on-primary-container);border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm);padding:var(--space-md);max-width:85%}
.chat-bubble-user{background-color:var(--color-secondary-container);color:var(--color-on-secondary-container);border-radius:var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);padding:var(--space-md);max-width:85%;margin-left:auto}

/* ── Chips ── */
.chip-ghost{border:2px solid var(--color-primary-container);color:var(--color-primary);background:transparent;transition:all .2s ease;cursor:pointer}
.chip-ghost:hover{background:color-mix(in srgb,var(--color-primary-container) 10%,transparent)}
.chip-active{background-color:var(--color-primary-container)!important;color:var(--color-on-primary-container)!important;border-color:var(--color-primary-container)!important}

/* ── Data table ── */
.data-table-row{transition:background-color .15s ease}
.data-table-row:hover .row-actions{opacity:1;transform:translateX(0)}
.row-actions{opacity:0;transform:translateX(10px);transition:all .2s cubic-bezier(.4,0,.2,1.4)}

/* ── Theme toggle ── */
.theme-toggle{cursor:pointer;width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:all .3s ease;background:var(--color-surface-container-high);color:var(--color-on-surface-variant);border:1px solid var(--color-outline-variant)}
.theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary)}

/* ── Admin/Portal dark sidebar pattern (light theme only) ── */
.light .admin-sidebar,
[data-theme="light"] .admin-sidebar{background-color:var(--color-inverse-surface);color:var(--color-inverse-on-surface)}
.light .admin-sidebar .active-rail-item,
[data-theme="light"] .admin-sidebar .active-rail-item{border-left-color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent)}

/* ── Responsive ── */
@media(max-width:768px){
  :root{--space-margin:16px}
  .display-lg{font-size:32px;line-height:40px}
  .headline-lg{font-size:24px;line-height:32px}
  .hide-mobile{display:none!important}
}

/* ── Skip-to-content ── */
.skip-link{position:absolute;top:-100px;left:12px;background:var(--color-primary-container,#ff6b00);color:var(--color-on-primary-container,#fff);padding:8px 16px;border-radius:8px;z-index:9999;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* ── Focus-visible for accessibility ── */
:focus-visible{outline:2px solid var(--color-primary,#ffb693);outline-offset:2px}
:focus:not(:focus-visible){outline:none}