/* ==========================================================================
   cockpit4me Design System – colors_and_type.css
   Base + semantic tokens for the cockpit4me Branded House
   (cockpit4me root → CLARA governance → LISA reflection)
   ========================================================================== */

/* ---------- FONTS (self-hosted, brand-uploaded variable files) ---------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --c4m-base: #111111;        /* brand.base — text, primary CTA */
  --c4m-surface: #FFFFFF;     /* brand.surface — page background */
  --c4m-accent: #5A2DBD;      /* brand.accent — "violet-deep" / focus dot */
  --c4m-accent-light: #7B5CD6;/* "violet-light" — hover only */

  /* ---------- NEUTRAL SCALE (near-black → near-white) ---------- */
  --c4m-gray-50:  #FAFAFA;
  --c4m-gray-100: #F5F5F5;
  --c4m-gray-200: #E5E5E5;
  --c4m-gray-300: #D4D4D4;
  --c4m-gray-400: #A3A3A3;
  --c4m-gray-500: #737373;
  --c4m-gray-600: #525252;
  --c4m-gray-700: #404040;
  --c4m-gray-800: #262626;
  --c4m-gray-900: #171717;

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg-1: #111111;   /* primary text, headlines */
  --fg-2: #525252;   /* body copy */
  --fg-3: #737373;   /* secondary text, descriptions */
  --fg-4: #A3A3A3;   /* tertiary / hint text */
  --fg-5: #D4D4D4;   /* rule numbers, dividers labels */
  --fg-on-accent: #FFFFFF;
  --fg-on-dark: #FFFFFF;

  /* ---------- SEMANTIC BACKGROUND ---------- */
  --bg-surface: #FFFFFF;
  --bg-muted:   #FAFAFA;
  --bg-subtle:  #F5F5F5;
  --bg-invert:  #111111;

  /* ---------- SEMANTIC BORDER ---------- */
  --border-hairline: #F5F5F5;
  --border-default:  #E5E5E5;
  --border-strong:   #D4D4D4;
  --border-focus:    #111111;

  /* ---------- ACCENT (use sparingly — see governance rules) ---------- */
  --accent:        #5A2DBD;
  --accent-hover:  #7B5CD6;
  --accent-ring:   rgba(90, 45, 189, 0.20);

  /* ---------- STATUS (utility only; not for CTAs) ---------- */
  --status-danger: #DC2626;
  --status-warn:   #B45309;
  --status-ok:     #166534;

  /* ---------- TYPE SCALE ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --fs-xs:   12px;  /* eyebrow, meta */
  --fs-sm:   14px;  /* body, UI */
  --fs-base: 16px;  /* body large */
  --fs-lg:   18px;  /* lead */
  --fs-xl:   24px;  /* h3 */
  --fs-2xl:  30px;  /* h2 */
  --fs-3xl:  40px;  /* h1 desktop */
  --fs-4xl:  56px;  /* hero */
  --fs-5xl:  64px;  /* hero xl */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* eyebrows, UPPERCASE labels */

  /* ---------- SPACING / RADIUS / ELEVATION ---------- */
  --space-grid: 8px;             /* 8pt baseline */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-0: 0px;               /* default: hard edges */
  --radius-sm: 8px;               /* form inputs */
  --radius-md: 16px;              /* small cards */
  --radius-lg: 24px;              /* large surface cards */

  --max-content: 1200px;
  --max-text: 65ch;

  /* ---------- MOTION ---------- */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   SEMANTIC TYPE STYLES
   Use these classes OR the CSS vars directly. No font-bold on primary h1.
   ========================================================================== */

html { font-family: var(--font-sans); color: var(--fg-1); -webkit-font-smoothing: antialiased; }
body { background: var(--bg-surface); }

::selection { background: var(--accent); color: #fff; }

/* ——— Eyebrow (section label above h2) ——— */
.c4m-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-snug);
}

/* ——— Display / H1 hero ——— */
.c4m-h1 {
  font-size: clamp(36px, 5vw, var(--fs-4xl));
  font-weight: var(--fw-black);       /* 900 — the only place black is used */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* ——— H2 section ——— */
.c4m-h2 {
  font-size: clamp(24px, 3vw, var(--fs-2xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* ——— H3 card / module ——— */
.c4m-h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* ——— H4 inline (list titles, small cards) ——— */
.c4m-h4 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

/* ——— Lead paragraph ——— */
.c4m-lead {
  font-size: var(--fs-lg);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
  max-width: 54ch;
}

/* ——— Body ——— */
.c4m-body {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}

.c4m-body-strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

/* ——— Meta (01, 02… numbering, footer micro) ——— */
.c4m-meta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--fg-5);
}

/* ——— Mono (ON-IDs, exit codes, evidence) ——— */
.c4m-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: 0;
}

/* ==========================================================================
   COMPONENT PRIMITIVES (optional helpers)
   ========================================================================== */

.c4m-grid-background {
  background-image:
    linear-gradient(to right, rgba(17,17,17,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.c4m-grid-background-subtle {
  background-image:
    linear-gradient(to right, rgba(17,17,17,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

.c4m-focus-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
}
.c4m-focus-dot--md { width: 12px; height: 12px; }

/* ——— Buttons ——— */
.c4m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  padding: 12px 24px;
  border-radius: 0;                /* square CTAs are brand signature */
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
  cursor: pointer;
  border: 1px solid transparent;
}
.c4m-btn--primary   { background: var(--c4m-base); color: #fff; }
.c4m-btn--primary:hover { background: var(--c4m-gray-800); }
.c4m-btn--secondary { background: #fff; color: var(--c4m-base); border-color: var(--border-strong); }
.c4m-btn--secondary:hover { border-color: var(--c4m-base); }
.c4m-btn--accent    { background: var(--accent); color: #fff; }
.c4m-btn--accent:hover { background: var(--accent-hover); }
.c4m-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ——— Card (matrix style) ——— */
.c4m-card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 0;                /* brand: hard edges for system cards */
}

/* ——— Input ——— */
.c4m-input {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  transition: border-color var(--motion-base);
}
.c4m-input:hover  { border-color: var(--border-strong); }
.c4m-input:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }