/* ============================================================
   FORONDA COMMAND CENTER — Design Tokens v1.0
   Cockpit Design System Foundation
   Brand Agent | 2026-05-30
   ============================================================
   AESTHETIC: Retro-futuristic aerospace cockpit.
   Deep near-black with indigo atmosphere. Luminous glow
   attention surfaces. Syne display + JetBrains Mono data.
   Dark theme default. Mobile-first (375px base).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {

  /* ────────────────────────────────────────────────
     TYPOGRAPHY
     ──────────────────────────────────────────────── */

  --font-display:    'Syne', sans-serif;          /* Headings, agent names, POP text */
  --font-mono:       'JetBrains Mono', monospace; /* Data labels, timestamps, status */
  --font-body:       'Syne', sans-serif;          /* Body — Syne reads clean at all sizes */

  /* Type Scale — Mobile-first, POP is real */
  --text-xs:         0.625rem;   /* 10px — metadata, timestamps */
  --text-sm:         0.75rem;    /* 12px — labels, captions, badges */
  --text-base:       0.875rem;   /* 14px — card body, secondary */
  --text-md:         1rem;       /* 16px — primary content */
  --text-lg:         1.125rem;   /* 18px — card title */
  --text-xl:         1.375rem;   /* 22px — zone headers */
  --text-2xl:        1.75rem;    /* 28px — screen headers */
  --text-3xl:        2.25rem;    /* 36px — major display */
  --text-pop:        3rem;       /* 48px — POP hero numbers/alerts */
  --text-display:    4rem;       /* 64px — cockpit title / critical count */

  /* Font Weights */
  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Line Heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  /* Letter Spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.2em;  /* For mono data labels + badge text */


  /* ────────────────────────────────────────────────
     BASE BACKGROUND RAMP
     Deep near-black with indigo atmosphere
     ──────────────────────────────────────────────── */

  --bg-void:         #03040a;   /* Deepest — body background, modal overlay */
  --bg-base:         #070c18;   /* Page background — deep indigo-black */
  --bg-well:         #0b1221;   /* Recessed wells, sidebars */
  --bg-surface-1:    #0f1929;   /* Card background — level 1 */
  --bg-surface-2:    #131f33;   /* Card background — level 2, elevated */
  --bg-surface-3:    #192840;   /* Hover states, selected */
  --bg-rim:          #1e3050;   /* Rim highlights on glass cards */
  --bg-divider:      #1a2640;   /* Subtle dividers */
  --bg-scrim:        rgba(3, 4, 10, 0.82); /* Modal backdrop */


  /* ────────────────────────────────────────────────
     NEUTRAL TEXT RAMP
     ──────────────────────────────────────────────── */

  --text-primary:    #e8eef8;   /* Primary text — warm-cool white */
  --text-secondary:  #8da4c4;   /* Secondary — muted blue-grey */
  --text-tertiary:   #4d6480;   /* Tertiary — very muted */
  --text-disabled:   #2d3f55;   /* Disabled states */
  --text-inverse:    #070c18;   /* On bright backgrounds */

  /* ────────────────────────────────────────────────
     ATTENTION COLOR SYSTEM
     Maps exactly to ecosystem Presentation Protocol
     AND cockpit_artifacts.attention_level values

     GREEN  = go / done         (attention_level: —, status: approved/done)
     RED    = urgent / blocker  (attention_level: now, status: unread)
     CYAN   = decision/waiting  (attention_level: soon, status: iterate)
     ORANGE = body text / read  (attention_level: fyi, main content body)
     ──────────────────────────────────────────────── */

  /* ── RED — URGENT / NOW ── */
  --red-core:        #ff2d2d;
  --red-bright:      #ff4545;
  --red-dim:         #c41e1e;
  --red-bg:          #140606;
  --red-surface:     #1e0909;
  --red-border:      #5c1414;
  --red-glow:        rgba(255, 45, 45, 0.35);
  --red-glow-soft:   rgba(255, 45, 45, 0.12);
  --red-text:        #ff7070;
  --red-text-on:     #fff0f0;

  /* ── ORANGE — BODY / ACTIVE CONTENT ── */
  --orange-core:     #ff8c00;
  --orange-bright:   #ffa733;
  --orange-dim:      #c46800;
  --orange-bg:       #120900;
  --orange-surface:  #1a0f00;
  --orange-border:   #5c3300;
  --orange-glow:     rgba(255, 140, 0, 0.30);
  --orange-glow-soft:rgba(255, 140, 0, 0.10);
  --orange-text:     #ffaa44;
  --orange-text-on:  #fff3e0;

  /* ── CYAN — DECISION / SOON ── */
  --cyan-core:       #00d4ff;
  --cyan-bright:     #33ddff;
  --cyan-dim:        #008fb5;
  --cyan-bg:         #00090f;
  --cyan-surface:    #000f18;
  --cyan-border:     #004d6e;
  --cyan-glow:       rgba(0, 212, 255, 0.30);
  --cyan-glow-soft:  rgba(0, 212, 255, 0.10);
  --cyan-text:       #55e0ff;
  --cyan-text-on:    #e0f9ff;

  /* ── GREEN — GO / DONE ── */
  --green-core:      #00e87a;
  --green-bright:    #33f090;
  --green-dim:       #00a855;
  --green-bg:        #000f07;
  --green-surface:   #001409;
  --green-border:    #005c2a;
  --green-glow:      rgba(0, 232, 122, 0.28);
  --green-glow-soft: rgba(0, 232, 122, 0.09);
  --green-text:      #44f098;
  --green-text-on:   #e0fff0;

  /* ── INDIGO — ACCENT / STRUCTURAL (unique cockpit accent) ── */
  --indigo-core:     #6366f1;
  --indigo-bright:   #818cf8;
  --indigo-dim:      #4338ca;
  --indigo-bg:       #06070f;
  --indigo-surface:  #090b19;
  --indigo-border:   #2d2f7a;
  --indigo-glow:     rgba(99, 102, 241, 0.25);
  --indigo-glow-soft:rgba(99, 102, 241, 0.08);
  --indigo-text:     #a5b4fc;

  /* ── AMBER — WARNING / AGENT ACTIVITY ── */
  --amber-core:      #f59e0b;
  --amber-bright:    #fbbf24;
  --amber-dim:       #b45309;
  --amber-bg:        #0f0900;
  --amber-surface:   #160d00;
  --amber-border:    #5c3800;
  --amber-glow:      rgba(245, 158, 11, 0.28);
  --amber-text:      #fcd34d;


  /* ────────────────────────────────────────────────
     AGENT TIER COLORS
     Each tier has a signature color for chips/avatars
     ──────────────────────────────────────────────── */

  --tier-code:       #6366f1;   /* Code-side agents — indigo */
  --tier-cowork:     #00d4ff;   /* CoWork / Operator — cyan */
  --tier-chat:       #00e87a;   /* Chat-tier — green */
  --tier-hosted:     #ff8c00;   /* Hosted / Managed — orange */
  --tier-external:   #8da4c4;   /* External — neutral */


  /* ────────────────────────────────────────────────
     SPACING SCALE
     Mobile-first, consistent rhythm
     ──────────────────────────────────────────────── */

  --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 */


  /* ────────────────────────────────────────────────
     BORDER RADIUS
     ──────────────────────────────────────────────── */

  --radius-xs:   0.125rem;  /* 2px — data table cells */
  --radius-sm:   0.25rem;   /* 4px — badges, chips */
  --radius-md:   0.5rem;    /* 8px — small cards, buttons */
  --radius-lg:   0.875rem;  /* 14px — main cards */
  --radius-xl:   1.25rem;   /* 20px — panels, modals */
  --radius-2xl:  1.75rem;   /* 28px — large surfaces */
  --radius-full: 9999px;    /* Pills, avatars */


  /* ────────────────────────────────────────────────
     GLASS / 3D SURFACE TREATMENT
     The cockpit glass aesthetic —
     multiple shadow layers + inner highlights
     ──────────────────────────────────────────────── */

  /* Glass surface backgrounds (with alpha for layering) */
  --glass-1:     rgba(15, 25, 41, 0.75);   /* Subtle glass */
  --glass-2:     rgba(19, 31, 51, 0.82);   /* Standard card glass */
  --glass-3:     rgba(25, 40, 64, 0.90);   /* Elevated glass */
  --glass-modal: rgba(7, 12, 24, 0.95);    /* Modal glass */

  /* Blur levels */
  --blur-xs:     4px;
  --blur-sm:     8px;
  --blur-md:     16px;
  --blur-lg:     28px;
  --blur-xl:     48px;

  /* Glass edge highlights (top rim + left rim) */
  --glass-rim-top:   rgba(255, 255, 255, 0.07);
  --glass-rim-left:  rgba(255, 255, 255, 0.04);
  --glass-rim-inner: rgba(255, 255, 255, 0.03);

  /* Core shadow ramp (layered for 3D depth) */
  --shadow-flat:
    0 1px 2px rgba(0, 0, 0, 0.5);

  --shadow-sm:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.7);

  --shadow-md:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 var(--glass-rim-top),
    inset 1px 0 0 var(--glass-rim-left);

  --shadow-lg:
    0 8px 24px rgba(0, 0, 0, 0.7),
    0 4px 8px rgba(0, 0, 0, 0.8),
    0 1px 0 rgba(255,255,255,0.04),
    inset 0 1px 0 var(--glass-rim-top),
    inset 1px 0 0 var(--glass-rim-left),
    inset 0 -1px 0 rgba(0,0,0,0.4);

  --shadow-xl:
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 var(--glass-rim-top),
    inset 1px 0 0 var(--glass-rim-left),
    inset 0 -1px 0 rgba(0,0,0,0.5);

  /* Attention glow shadows (layered glow for each semantic) */
  --glow-red:
    0 0 0 1px var(--red-border),
    0 0 12px var(--red-glow),
    0 0 32px var(--red-glow-soft),
    0 4px 16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,80,80,0.12);

  --glow-orange:
    0 0 0 1px var(--orange-border),
    0 0 12px var(--orange-glow),
    0 0 28px var(--orange-glow-soft),
    0 4px 16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,140,0,0.10);

  --glow-cyan:
    0 0 0 1px var(--cyan-border),
    0 0 12px var(--cyan-glow),
    0 0 28px var(--cyan-glow-soft),
    0 4px 16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(0,212,255,0.10);

  --glow-green:
    0 0 0 1px var(--green-border),
    0 0 10px var(--green-glow),
    0 0 24px var(--green-glow-soft),
    0 4px 16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(0,232,122,0.09);

  --glow-indigo:
    0 0 0 1px var(--indigo-border),
    0 0 10px var(--indigo-glow),
    0 0 24px var(--indigo-glow-soft),
    0 4px 16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(99,102,241,0.08);


  /* ────────────────────────────────────────────────
     Z-INDEX LAYERS
     ──────────────────────────────────────────────── */

  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-top:       600;


  /* ────────────────────────────────────────────────
     MOTION / EASING TOKENS
     ──────────────────────────────────────────────── */

  /* Durations */
  --dur-instant:  80ms;
  --dur-fast:     150ms;
  --dur-normal:   250ms;
  --dur-slow:     400ms;
  --dur-crawl:    600ms;
  --dur-pulse:    2000ms;   /* Urgent pulse cycle */
  --dur-shimmer:  3000ms;   /* Glass shimmer cycle */

  /* Easings */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);       /* Natural decel */
  --ease-in:        cubic-bezier(0.64, 0, 0.78, 0);       /* Natural accel */
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);       /* Standard */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);    /* Springy — card lift */
  --ease-elastic:   cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy — badge pop */
  --ease-linear:    linear;


  /* ────────────────────────────────────────────────
     LAYOUT / BREAKPOINTS (as container sizes)
     ──────────────────────────────────────────────── */

  --screen-mobile: 375px;
  --screen-sm:     480px;
  --screen-md:     768px;
  --screen-lg:     1024px;
  --screen-xl:     1280px;

  /* Safe area (truck/mobile use) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Content max-widths */
  --content-mobile: 375px;
  --content-card:   560px;
  --content-panel:  720px;
  --content-wide:   960px;


  /* ────────────────────────────────────────────────
     BORDER TOKENS
     ──────────────────────────────────────────────── */

  --border-subtle:  1px solid rgba(255,255,255,0.05);
  --border-dim:     1px solid rgba(255,255,255,0.08);
  --border-default: 1px solid rgba(255,255,255,0.11);
  --border-bright:  1px solid rgba(255,255,255,0.18);
  --border-focus:   2px solid var(--cyan-core);


  /* ────────────────────────────────────────────────
     ICON / AVATAR SIZES
     ──────────────────────────────────────────────── */

  --icon-xs:  1rem;      /* 16px */
  --icon-sm:  1.25rem;   /* 20px */
  --icon-md:  1.5rem;    /* 24px */
  --icon-lg:  2rem;      /* 32px */
  --icon-xl:  2.5rem;    /* 40px */
  --icon-2xl: 3rem;      /* 48px */

} /* end :root */


/* ────────────────────────────────────────────────────────
   BASE RESET + GLOBAL DEFAULTS
   ──────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Atmospheric indigo background texture */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(99,102,241,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0,212,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 80%, rgba(0,232,122,0.03) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Selection */
::selection {
  background: rgba(0, 212, 255, 0.25);
  color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-well); }
::-webkit-scrollbar-thumb {
  background: var(--bg-rim);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Focus visible ring */
:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS
   Used by components.css
   ──────────────────────────────────────────────────────── */

/* Urgent pulse — red glow throb for now/unread items */
@keyframes urgent-pulse {
  0%   { box-shadow: var(--glow-red); opacity: 1; }
  50%  { box-shadow: 0 0 0 1px var(--red-border), 0 0 24px rgba(255,45,45,0.55), 0 0 60px rgba(255,45,45,0.20), 0 4px 16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,80,80,0.15); opacity: 0.95; }
  100% { box-shadow: var(--glow-red); opacity: 1; }
}

/* Badge dot pulse */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

/* Glass shimmer — subtle light sweep */
@keyframes glass-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Card lift on hover */
@keyframes card-lift {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-3px) scale(1.005); }
}

/* Fade in up — for page entry */
@keyframes fade-in-up {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide in right — for modals */
@keyframes slide-in-right {
  0%   { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Spin — for loading states */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Badge pop — elastic scale */
@keyframes badge-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Count up flash — when number changes */
@keyframes count-flash {
  0%   { color: var(--cyan-bright); }
  100% { color: inherit; }
}

/* Cockpit scan line (subtle, taste) */
@keyframes scan-line {
  0%   { top: -5%; opacity: 0.04; }
  100% { top: 105%; opacity: 0.01; }
}