/*
 * Elintra design tokens.
 *
 * Every numeric value, color, font, and motion timing used anywhere in the
 * theme or the elintra-os plugin comes from one of these custom properties.
 * Update this file to retune the design system; never hard-code values
 * elsewhere.
 */

:root {

	/* ===================================================================
	 * COLOR — SURFACES
	 * Pure black base. Subsequent surfaces are progressively lighter blacks
	 * for layering. Avoid using gray for surfaces; we want the matte look.
	 * ============================================================== */
	--eos-bg:                #000000;
	--eos-surface:           #070707;
	--eos-panel:             #0A0A0A;
	--eos-panel-elevated:    #111111;

	/* COLOR — BORDERS */
	--eos-border:            #1A1A1A;
	--eos-border-strong:     #2A2A2A;
	--eos-border-accent:     #F05A28;

	/* COLOR — TEXT */
	--eos-text:              #F5F5F2;   /* soft white, never #FFF */
	--eos-text-muted:        #8B8B8B;
	--eos-text-subtle:       #555555;
	--eos-text-inverse:      #000000;

	/* COLOR — ACCENT (Elintra orange — bright, readable on black, used sparingly) */
	--eos-accent:            #F05A28;
	--eos-accent-hover:      #FF6A2A;
	--eos-accent-press:      #C9441D;
	--eos-accent-soft:       rgba(240, 90, 40, 0.10);

	/* COLOR — SEMANTIC */
	--eos-success:           #10B981;
	--eos-warning:           #F59E0B;
	--eos-danger:            #DC2626;
	--eos-info:              #3B82F6;

	/* OS console controls — neutral premium palette (orange is brand accent only) */
	--eos-os-btn-primary-bg:     #F5F5F2;
	--eos-os-btn-primary-fg:     #111111;
	--eos-os-btn-primary-hover:  #FFFFFF;
	--eos-os-row-selected:       rgba(148, 163, 184, 0.14);
	--eos-os-avatar-bg:          #2A3140;
	--eos-os-avatar-fg:          #CBD5E1;
	--eos-os-focus:              rgba(148, 163, 184, 0.55);

	/* COLOR — FOCUS RING */
	--eos-focus-ring:        rgba(148, 163, 184, 0.55);


	/* ===================================================================
	 * TYPOGRAPHY
	 * No hosted fonts. System stacks only.
	 *
	 * SANS  = main text, headings, body, cards, tables, forms, dashboards.
	 * MONO  = navigation, status pills, metadata, timestamps, part numbers,
	 *         work order numbers, serial numbers, system labels.
	 *         The .eos-meta utility is the sanctioned use.
	 * ============================================================== */
	--eos-font-sans:         "Helvetica Neue", Helvetica, Arial, sans-serif;
	--eos-font-mono:         "IBM Plex Mono", "SF Mono", Consolas, "Courier New", monospace;

	/* TYPE SCALE — 1rem = 16px */
	--eos-text-xs:           0.75rem;     /* 12 */
	--eos-text-sm:           0.875rem;    /* 14 */
	--eos-text-base:         1rem;        /* 16 */
	--eos-text-lg:           1.125rem;    /* 18 */
	--eos-text-xl:           1.25rem;     /* 20 */
	--eos-text-2xl:          1.5rem;      /* 24 */
	--eos-text-3xl:          1.875rem;    /* 30 */
	--eos-text-4xl:          2.25rem;     /* 36 */
	--eos-text-5xl:          3rem;        /* 48 */
	--eos-text-6xl:          3.75rem;     /* 60 */
	--eos-text-7xl:          4.5rem;      /* 72 */

	/* LINE HEIGHT */
	--eos-leading-tight:     1.1;
	--eos-leading-snug:      1.25;
	--eos-leading-normal:    1.5;
	--eos-leading-relaxed:   1.7;

	/* LETTER SPACING */
	--eos-tracking-tight:    -0.02em;
	--eos-tracking-normal:   0;
	--eos-tracking-wide:     0.04em;
	--eos-tracking-wider:    0.08em;
	--eos-tracking-widest:   0.16em;

	/* WEIGHT */
	--eos-weight-regular:    400;
	--eos-weight-medium:     500;
	--eos-weight-semibold:   600;
	--eos-weight-bold:       700;


	/* ===================================================================
	 * SPACING — 4px baseline grid
	 * ============================================================== */
	--eos-space-1:           0.25rem;    /* 4  */
	--eos-space-2:           0.5rem;     /* 8  */
	--eos-space-3:           0.75rem;    /* 12 */
	--eos-space-4:           1rem;       /* 16 */
	--eos-space-5:           1.5rem;     /* 24 */
	--eos-space-6:           2rem;       /* 32 */
	--eos-space-7:           3rem;       /* 48 */
	--eos-space-8:           4rem;       /* 64 */
	--eos-space-9:           6rem;       /* 96 */
	--eos-space-10:          8rem;       /* 128 */


	/* ===================================================================
	 * LAYOUT
	 * ============================================================== */
	--eos-container:         1200px;
	--eos-container-narrow:  880px;
	--eos-container-wide:    1440px;

	--eos-header-height:     72px;
	--eos-os-sidebar:        260px;
	--eos-os-topbar:         56px;


	/* ===================================================================
	 * RADIUS — sharp, aerospace-instrument feel, never pillowy
	 * ============================================================== */
	--eos-radius-none:       0;
	--eos-radius-sm:         2px;
	--eos-radius:            4px;
	--eos-radius-lg:         8px;


	/* ===================================================================
	 * BORDERS
	 * ============================================================== */
	--eos-border-width:      1px;


	/* ===================================================================
	 * SHADOWS — restrained, never glowing
	 * ============================================================== */
	--eos-shadow-1:          0 1px 0 0 var(--eos-border);
	--eos-shadow-2:          0 1px 2px 0 rgba(0, 0, 0, 0.6);
	--eos-shadow-3:          0 10px 30px 0 rgba(0, 0, 0, 0.6);


	/* ===================================================================
	 * MOTION
	 * ============================================================== */
	--eos-easing:            cubic-bezier(0.2, 0, 0, 1);
	--eos-duration-fast:     120ms;
	--eos-duration-base:     200ms;
	--eos-duration-slow:     400ms;


	/* ===================================================================
	 * Z-INDEX SCALE
	 * ============================================================== */
	--eos-z-base:            1;
	--eos-z-header:          100;
	--eos-z-dropdown:        200;
	--eos-z-overlay:         900;
	--eos-z-modal:           1000;
	--eos-z-toast:           2000;

	color-scheme: dark;
}


/* =====================================================================
 * THEME OVERRIDES
 *
 * The OS supports two themes. Dark (default) is the production look:
 * pure black instrument-panel surfaces with restrained orange accent.
 * Light is provided for users who find the dark theme tiring on long
 * shifts. Both are drawn entirely from the same token names — every
 * component already reads from variables, so flipping the theme is a
 * single attribute swap on <html>.
 *
 * The theme is selected by [data-eos-theme="dark|light"] on <html>,
 * set server-side from the eos_theme cookie (see head-console.php).
 * Default = dark when the cookie is absent. Public marketing pages
 * are intentionally not themed — they always render dark.
 *
 * Contrast tuning notes:
 *   - --eos-text-muted bumped from #8B8B8B (4.6:1 over #050505) to
 *     #B0B0B0 (~7:1) so secondary text on dashboards reads cleanly.
 *   - --eos-border bumped from #1A1A1A to #2A2A2A so card edges
 *     separate from background without shadow.
 * ================================================================= */

/* DARK theme — explicit. Same as :root defaults but written here so the
   selector specificity matches the light override below and theme
   switching is symmetric. */
[data-eos-theme="dark"] {
	--eos-bg:                  #000000;
	--eos-os-rail-bg:          #0C0C0D;
	--eos-os-main-bg:          var(--eos-bg);
	/* Near-black page, but cards/panels are elevated charcoal so the
	   hierarchy reads — not flat black on flat black. */
	--eos-surface:           #121214;
	--eos-surface-2:         #1B1B1E;
	--eos-surface-3:         #232328;
	--eos-panel:             #161618;
	--eos-panel-elevated:    #1F1F23;

	--eos-border:            #2C2C30;
	--eos-border-strong:     #3C3C42;

	--eos-text:              #F5F5F2;
	--eos-text-muted:        #B0B0B0;
	--eos-text-subtle:       #6E6E6E;
	--eos-text-inverse:      #000000;

	--eos-os-btn-primary-bg:     #F5F5F2;
	--eos-os-btn-primary-fg:     #111111;
	--eos-os-btn-primary-hover:  #FFFFFF;
	--eos-os-row-selected:       rgba(148, 163, 184, 0.14);
	--eos-os-avatar-bg:          #2A3140;
	--eos-os-avatar-fg:          #CBD5E1;
	--eos-os-nav-active:         #1E2329;
	--eos-os-nav-active-text:    #F5F5F2;
	--eos-os-nav-hover:          #161A1F;
	--eos-os-input-focus-border: #8B95A1;
	--eos-os-focus:              rgba(148, 163, 184, 0.55);

	color-scheme: dark;
}

/* LIGHT theme — warm off-white surfaces, deeper accent for legibility
   on bright background. Borders pick up small alpha black rather than
   solid grays so card edges stay quiet. */
[data-eos-theme="light"] {
	/* Page background stays a subtle warm off-white so white cards read as
	   crisp, elevated surfaces sitting on top of it. Cards/nested panels are
	   clean cool-neutrals — never the muddy beige they used to be. */
	--eos-bg:                  #ECEFF4;
	--eos-os-rail-bg:          #FFFFFF;
	--eos-os-main-bg:          #ECEFF4;
	--eos-surface:           #FFFFFF;
	--eos-surface-2:         #EEF1F5;
	--eos-surface-3:         #E3E8EF;
	--eos-panel:             #FFFFFF;
	--eos-panel-elevated:    #F7F9FB;

	--eos-border:            rgba(15, 23, 42, 0.10);
	--eos-border-strong:     rgba(15, 23, 42, 0.16);

	--eos-text:              #0A0A0A;
	--eos-text-muted:        #4A4A4A;
	--eos-text-subtle:       #7A7A7A;
	--eos-text-inverse:      #000000;

	--eos-os-btn-primary-bg:     #111111;
	--eos-os-btn-primary-fg:     #FFFFFF;
	--eos-os-btn-primary-hover:  #2A2A2A;
	--eos-os-row-selected:       rgba(71, 85, 105, 0.10);
	--eos-os-avatar-bg:          #E5E7EB;
	--eos-os-avatar-fg:          #374151;
	--eos-os-nav-active:       #EEF0F2;
	--eos-os-nav-active-text:  #111111;
	--eos-os-nav-hover:        #F3F4F5;
	--eos-os-input-focus-border: #6B7280;
	--eos-os-focus:              rgba(71, 85, 105, 0.45);

	color-scheme: light;
}


/* Respect reduced motion preference. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--eos-duration-fast: 0ms;
		--eos-duration-base: 0ms;
		--eos-duration-slow: 0ms;
	}
}