/* ============================================================================
   OptimaOS Design Language — Token File v1.0
   ----------------------------------------------------------------------------
   This is the single source of truth. Every screen in the product is generated
   by applying these tokens through the composition rules. Nothing is hand-drawn.

   Direction: restrained, spacious, quiet. (Linear / Stripe register.)

   HOW ROLES DIFFER: not by redrawing screens, but by changing ONE variable —
   --density — which rescales spacing, control height, and type step together.
   Same components, same tokens, different density. That is the whole idea.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {

  /* ---- 1. PRIMITIVE SCALE (never referenced directly in components) -------- */
  /* A single 4px base unit. Every spatial value is a multiple. No magic numbers. */
  --u: 4px;

  --space-0: 0;
  --space-1: calc(var(--u) * 1);   /*  4px */
  --space-2: calc(var(--u) * 2);   /*  8px */
  --space-3: calc(var(--u) * 3);   /* 12px */
  --space-4: calc(var(--u) * 4);   /* 16px */
  --space-5: calc(var(--u) * 5);   /* 20px */
  --space-6: calc(var(--u) * 6);   /* 24px */
  --space-8: calc(var(--u) * 8);   /* 32px */
  --space-10: calc(var(--u) * 10); /* 40px */
  --space-12: calc(var(--u) * 12); /* 48px */
  --space-16: calc(var(--u) * 16); /* 64px */

  /* ---- 2. COLOR — OptimaOS Brand Sheet v1.0 ------------------------------- */
  /* Slate Navy is structural (sidebars, headers, chrome). Cobalt Blue is THE one
     accent — primary actions, active states, focus. Semantic colors are reserved
     for status meaning and never used decoratively. This replaces the prior
     slate-teal experiment and the seven novelty presets as the single identity. */
  --c-bg:          #f8fafc;  /* light paper grid canvas */
  --c-surface:     rgba(255, 255, 255, 0.85);  /* frosted white cards */
  --c-surface-2:   rgba(241, 245, 249, 0.95);  /* table headers, inputs */
  --c-surface-3:   rgba(226, 232, 240, 0.85);
  --c-glass-bg:     rgba(255, 255, 255, 0.75);
  --c-glass-border: rgba(15, 23, 42, 0.08);
  --c-glass-glow:   rgba(99, 102, 241, 0.03);

  --c-border:      rgba(15, 23, 42, 0.06);
  --c-border-2:    rgba(15, 23, 42, 0.12);
  --c-border-3:    rgba(15, 23, 42, 0.20);

  --c-text:        #0f172a;  /* Slate Navy - high readability primary titles */
  --c-text-2:      #334155;  /* secondary text */
  --c-text-3:      #64748b;  /* tertiary cool gray */
  --c-text-4:      #94a3b8;

  /* One accent: Modern Indigo, per the brand sheet. */
  --c-accent:      #6366F1;
  --c-accent-hover:#4F46E5;
  --c-accent-weak: rgba(99, 102, 241, 0.15);  /* tint bg for active/selected states */
  --c-accent-text: #FFFFFF;  /* text on accent fills */

  /* Structural chrome — sidebar, topbar (Slate Navy per brand sheet) */
  --c-chrome:        #0f172a;
  --c-chrome-2:      #1e293b;  /* hover / raised element on chrome */
  --c-chrome-border: rgba(255, 255, 255, 0.08);
  --c-chrome-text:   #ffffff;
  --c-chrome-text-2: #94a3b8;

  /* Semantics — brand status colors, reserved exclusively for meaning */
  --c-success:     #10b981;  --c-success-weak: rgba(16, 185, 129, 0.1);
  --c-warning:     #f59e0b;  --c-warning-weak: rgba(245, 158, 11, 0.1);
  --c-danger:      #ef4444;  --c-danger-weak:  rgba(239, 68, 68, 0.1);
  --c-info:        #3b82f6;  --c-info-weak:    rgba(59, 130, 246, 0.1);

  /* ---- 3. TYPE — one family, tuned. Personality from weight & spacing, ----- */
  /*         not from mixing display faces. Quiet means disciplined type.       */
  --font-sans: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Outfit", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type ramp — steps are multiplied by --density-type so roles scale as one. */
  --type-xs:   11px;
  --type-sm:   12px;
  --type-base: 13px;
  --type-md:   14px;
  --type-lg:   16px;
  --type-xl:   20px;
  --type-2xl:  26px;
  --type-3xl:  32px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Tracking — tighten large sizes, open up small caps labels */
  --track-tight: -0.01em;
  --track-normal: 0;
  --track-label: 0.02em;   /* uppercase micro-labels only */

  /* ---- 4. SHAPE — soft but not round. Quiet products avoid pill everything - */
  --radius-sm: 5px;   /* inputs, chips, small controls */
  --radius-md: 8px;   /* cards, buttons, sheets */
  --radius-lg: 12px;  /* modals, large containers */
  --radius-full: 999px;

  /* ---- 5. ELEVATION — near-flat. Depth via border + tiny shadow, never big - */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(26,26,23,.04);
  --elev-2: 0 2px 8px rgba(26,26,23,.06), 0 1px 2px rgba(26,26,23,.04);
  --elev-3: 0 8px 24px rgba(26,26,23,.08), 0 2px 6px rgba(26,26,23,.04);

  /* ---- 6. MOTION — brief, soft. Quiet products don't bounce ---------------- */
  --ease: cubic-bezier(.2,0,0,1);
  --dur-fast: 100ms;
  --dur: 160ms;
  --dur-slow: 240ms;

  /* ==========================================================================
     7. DENSITY — THE ROLE VARIABLE
     --------------------------------------------------------------------------
     This is what makes role interfaces genuinely different rather than recolored.
     Set --density on a role's root element and the ENTIRE interface rescales:
     spacing, control height, and type step move together as one coordinated system.

       [data-density="compact"]   campus manager — war room, maximum on screen
       [data-density="default"]   most operational roles
       [data-density="comfortable"] tenant / occasional users — calm, spacious
       [data-density="touch"]     guard / technician — big targets, gloves, motion

     Components NEVER hardcode height or padding. They read these three vars.
     ========================================================================== */
  --density-space: 1;      /* multiplier on component padding */
  --density-control: 36px; /* base interactive control height */
  --density-type: 1;       /* multiplier on the type ramp */
  --density-gap: var(--space-4); /* base gap between stacked elements */
}

/* ---- Density presets ------------------------------------------------------ */
[data-density="compact"] {
  --density-space: 0.72;
  --density-control: 30px;
  --density-type: 0.94;
  --density-gap: var(--space-2);
}
[data-density="default"] {
  --density-space: 1;
  --density-control: 36px;
  --density-type: 1;
  --density-gap: var(--space-4);
}
[data-density="comfortable"] {
  --density-space: 1.35;
  --density-control: 44px;
  --density-type: 1.08;
  --density-gap: var(--space-6);
}
[data-density="touch"] {
  --density-space: 1.5;
  --density-control: 56px;
  --density-type: 1.15;
  --density-gap: var(--space-5);
}

/* ---- Dark surface (guard/technician field mode) --------------------------- */
/* Same tokens, inverted base. Accent and semantics keep their meaning. */
[data-theme="field"] {
  --c-bg:          #0b0f19;
  --c-surface:     rgba(30, 41, 59, 0.45);
  --c-surface-2:   rgba(15, 23, 42, 0.6);
  --c-surface-3:   rgba(255, 255, 255, 0.04);
  --c-glass-bg:     rgba(15, 23, 42, 0.45);
  --c-glass-border: rgba(255, 255, 255, 0.08);
  --c-glass-glow:   rgba(99, 102, 241, 0.12);
  --c-border:      rgba(255, 255, 255, 0.08);
  --c-border-2:    rgba(255, 255, 255, 0.15);
  --c-border-3:    rgba(255, 255, 255, 0.25);
  --c-text:        #ffffff;
  --c-text-2:      #cbd5e1;
  --c-text-3:      #94a3b8;
  --c-text-4:      #64748b;
  --c-accent:      #6366F1;
  --c-accent-hover:#4F46E5;
  --c-accent-weak: rgba(99, 102, 241, 0.15);
  --c-success:     #10b981; --c-success-weak: rgba(16, 185, 129, 0.1);
  --c-warning:     #f59e0b; --c-warning-weak: rgba(245, 158, 11, 0.1);
  --c-danger:      #ef4444; --c-danger-weak:  rgba(239, 68, 68, 0.1);
  --c-info:        #3b82f6; --c-info-weak:    rgba(59, 130, 246, 0.1);
}

/* ============================================================================
   8. COMPOSITION RULES — how primitives become components.
   These are the GRAMMAR. Every component derives from tokens + density vars.
   A developer builds new screens by composing these, never by inventing values.
   ============================================================================ */

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

body {
  font-family: var(--font-sans);
  font-size: calc(var(--type-base) * var(--density-type));
  line-height: var(--leading-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

/* --- Rule: every interactive control is one density-unit tall -------------- */
.fos-control {
  height: var(--density-control);
  padding: 0 calc(var(--space-3) * var(--density-space));
  border-radius: var(--radius-sm);
  font-size: calc(var(--type-md) * var(--density-type));
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* --- Rule: buttons ---------------------------------------------------------- */
.fos-btn {
  height: var(--density-control);
  padding: 0 calc(var(--space-4) * var(--density-space));
  border-radius: var(--radius-md);
  font-size: calc(var(--type-md) * var(--density-type));
  font-weight: var(--weight-medium);
  font-family: inherit;
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fos-btn:hover { background: var(--c-surface-2); }
.fos-btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}
.fos-btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.fos-btn--danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.fos-btn--ghost { background: transparent; border-color: transparent; color: var(--c-text-2); }
.fos-btn--ghost:hover { background: var(--c-surface-2); }

/* --- Rule: inputs — recessed well, hairline, focus lifts to accent --------- */
.fos-input {
  height: var(--density-control);
  width: 100%;
  padding: 0 calc(var(--space-3) * var(--density-space));
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: calc(var(--type-md) * var(--density-type));
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fos-input::placeholder { color: var(--c-text-3); }
.fos-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-weak);
}

/* --- Rule: the micro-label — the ONLY place uppercase tracking is used ------ */
.fos-label {
  font-size: calc(var(--type-xs) * var(--density-type));
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* --- Rule: card — surface + hairline + tiny elevation. No heavy shadows ---- */
.fos-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}
.fos-card__header {
  padding: calc(var(--space-3) * var(--density-space)) calc(var(--space-4) * var(--density-space));
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fos-card__body {
  padding: calc(var(--space-4) * var(--density-space));
}

/* --- Rule: title — tight tracking, semibold, scales with density ----------- */
.fos-title {
  font-size: calc(var(--type-lg) * var(--density-type));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-tight);
  color: var(--c-text);
}
.fos-title--display {
  font-size: calc(var(--type-2xl) * var(--density-type));
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
}

/* --- Rule: status dot + text (never a loud filled pill by default) --------- */
.fos-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: calc(var(--type-sm) * var(--density-type));
  color: var(--c-text-2);
}
.fos-status__dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex: none; }
.fos-status--active  .fos-status__dot { background: var(--c-success); }
.fos-status--warn    .fos-status__dot { background: var(--c-warning); }
.fos-status--danger  .fos-status__dot { background: var(--c-danger); }
.fos-status--idle    .fos-status__dot { background: var(--c-text-4); }

/* --- Rule: the stack — vertical rhythm comes from ONE gap token ------------ */
.fos-stack { display: flex; flex-direction: column; gap: var(--density-gap); }
.fos-stack--tight { gap: calc(var(--space-2) * var(--density-space)); }
.fos-row { display: flex; align-items: center; gap: calc(var(--space-3) * var(--density-space)); }

/* --- Rule: data table — hairlines only, generous row height at density ----- */
.fos-table { width: 100%; border-collapse: collapse; }
.fos-table th {
  text-align: left;
  padding: calc(var(--space-2) * var(--density-space)) calc(var(--space-3) * var(--density-space));
  font-size: calc(var(--type-xs) * var(--density-type));
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.fos-table td {
  padding: calc(var(--space-3) * var(--density-space)) calc(var(--space-3) * var(--density-space));
  font-size: calc(var(--type-md) * var(--density-type));
  color: var(--c-text-2);
  border-bottom: 1px solid var(--c-border);
}
.fos-table tr:last-child td { border-bottom: none; }

/* --- Accessibility floor: focus is always visible, motion respected -------- */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}