/* ============================================================================
   FacilityOS 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.
   ============================================================================ */

: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 — FacilityOS 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;  /* app canvas — slate-50 */
  --c-surface:     #FFFFFF;  /* raised surfaces: cards, sheets, rows */
  --c-surface-2:   #F1F5F9;  /* recessed: input wells, table headers */
  --c-surface-3:   #E9EEF5;  /* deeper recess, hover on subtle items */

  --c-border:      #E2E8F0;  /* hairline — the workhorse divider */
  --c-border-2:    #CBD5E1;  /* slightly stronger, for inputs */
  --c-border-3:    #94A3B8;  /* strongest, focus rings on neutrals */

  --c-text:        #0F172A;  /* primary ink — slate navy */
  --c-text-2:      #475569;  /* secondary — labels, meta */
  --c-text-3:      #64748B;  /* tertiary — captions, placeholders */
  --c-text-4:      #94A3B8;  /* quaternary — disabled, watermarks */

  /* One accent: Cobalt Blue, per the brand sheet. */
  --c-accent:      #2563EB;
  --c-accent-hover:#1D4ED8;
  --c-accent-weak: #EFF6FF;  /* 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: #1E293B;
  --c-chrome-text:   #E2E8F0;
  --c-chrome-text-2: #94A3B8;

  /* Semantics — brand status colors, reserved exclusively for meaning */
  --c-success:     #059669;  --c-success-weak: #ECFDF5;
  --c-warning:     #D97706;  --c-warning-weak: #FFFBEB;
  --c-danger:      #DC2626;  --c-danger-weak:  #FEF2F2;
  --c-info:        #2563EB;  --c-info-weak:    #EFF6FF;

  /* ---- 3. TYPE — one family, tuned. Personality from weight & spacing, ----- */
  /*         not from mixing display faces. Quiet means disciplined type.       */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --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:        #0F110F;
  --c-surface:   #171A17;
  --c-surface-2: #1F231F;
  --c-surface-3: #272C27;
  --c-border:    #2A2F2A;
  --c-border-2:  #353B35;
  --c-border-3:  #454C45;
  --c-text:      #F0F1EE;
  --c-text-2:    #B4B7B0;
  --c-text-3:    #7E827B;
  --c-text-4:    #565A54;
  --c-accent:      #4FA39B;
  --c-accent-hover:#5DB3AB;
  --c-accent-weak: #16302D;
  --c-success:  #4E9E63; --c-success-weak: #14241A;
  --c-warning:  #C89232; --c-warning-weak: #2A2110;
  --c-danger:   #D2564F; --c-danger-weak:  #2C1514;
  --c-info:     #5A8CC0; --c-info-weak:    #14202C;
}

/* ============================================================================
   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; }
}