/*
 * DF4 Labs — colors & type (v2 · proprietary AI-lab)
 *
 * Direction: confident product-tech aesthetic — Vercel / Linear / Stripe
 * Dashboard / Arc — with applied-AI-lab gravitas. Cool neutrals, deep ink,
 * one bold orange flag colour. Bold sans display. Used as fills, bars, pills
 * — not just hairline accents.
 *
 * Brand DNA preserved:
 *   - DF4 cube-arrow logomark (anchor)
 *   - Warm signature orange, retuned to a confident proprietary tone
 *   - Phosphor icons, monotone single weight
 *
 * Fonts (Google Fonts substitutes — swap for Geist / Söhne / Aeonik when licensed):
 *   Manrope         — display sans (geometric, distinctive, weights 600/700/800)
 *   Inter Tight     — body sans (tighter, more proprietary than plain Inter)
 *   JetBrains Mono  — code, mono UI labels, kicker eyebrows
 */

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

@import url('motion.css');

:root {
  /* =========================================================
   * PRIMITIVES — raw scales. Do not reference from components.
   * ========================================================= */

  /* Ink — cool near-black through slate */
  --ink-950: #07090C;
  --ink-900: #0B0D12;
  --ink-800: #11141B;
  --ink-700: #1A1F29;
  --ink-600: #262C38;

  /* Slate neutrals — cool, proprietary */
  --slate-900: #0F1218;
  --slate-800: #1B1F27;
  --slate-700: #2A2F3A;
  --slate-600: #3E4451;
  --slate-500: #5C6472;
  --slate-400: #8A92A1;
  --slate-300: #B4BAC5;
  --slate-200: #D4D8DF;
  --slate-150: #E4E7EC;
  --slate-100: #EEF0F3;
  --slate-50:  #F6F7F9;

  /* Paper — light surfaces. Slightly cool, not cream. */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAFBFC;
  --paper-100: #F4F5F7;
  --paper-200: #ECEEF2;

  /* Brand orange — proprietary tone. Confident, slightly burnt. */
  --orange-50:  #FFF4ED;
  --orange-100: #FFE3D0;
  --orange-200: #FFC6A1;
  --orange-300: #FFA06A;
  --orange-400: #F97A3D;
  --orange-500: #EC5B25;   /* primary brand orange */
  --orange-600: #D44A18;
  --orange-700: #B03A12;
  --orange-800: #8A2D0E;
  --orange-900: #5C1F0A;
  --orange-950: #3A1306;

  /* Signal hues — used in product UI (status, charts), not decoration */
  --green-500:  #10B981;
  --amber-500:  #F59E0B;
  --red-500:    #EF4444;
  --blue-500:   #3B82F6;
  --violet-500: #8B5CF6;

  /* =========================================================
   * SEMANTIC TOKENS — use these in components.
   * ========================================================= */

  /* Surfaces */
  --bg-0: var(--paper-0);          /* pure white — cards on tinted page */
  --bg-1: var(--paper-50);         /* default page background */
  --bg-2: var(--paper-100);        /* sunken section / app shell */
  --bg-3: var(--paper-200);        /* deeper sunken */
  --bg-inverse: var(--ink-900);    /* dark hero / footer / CTA */
  --bg-inverse-2: var(--ink-800);

  /* Foreground */
  --fg-1: var(--ink-900);          /* primary text */
  --fg-2: var(--slate-500);        /* secondary text, captions */
  --fg-3: var(--slate-400);        /* tertiary, eyebrows, meta */
  --fg-disabled: var(--slate-300);
  --fg-inverse: var(--paper-50);
  --fg-inverse-2: var(--slate-300);

  /* Brand */
  --accent: var(--orange-500);
  --accent-hover: var(--orange-600);
  --accent-pressed: var(--orange-700);
  --accent-soft: var(--orange-100);
  --on-accent: #FFFFFF;

  /* Borders */
  --border-1: var(--slate-150);    /* default hairline */
  --border-2: var(--slate-200);    /* stronger */
  --border-3: var(--slate-300);    /* emphasised */
  --border-strong: var(--ink-900); /* editorial rule */
  --border-accent: var(--orange-500);
  --border-inverse: rgba(244,245,247,0.10);
  --border-inverse-2: rgba(244,245,247,0.18);

  /* Status */
  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);

  /* =========================================================
   * BRAND ARCHITECTURE — sub-brand accents.
   * Each DF4 Labs company inherits all tokens above and
   * overrides ONLY --accent + (optionally) the warm-paper set.
   * ========================================================= */
  --accent-df4:      var(--orange-500);   /* parent — sovereign */
  --accent-foxlitx:  var(--orange-500);   /* inherits DF4 — most native sub-brand */
  --accent-repolize: #2563EB;             /* graph/analysis blue, distinct from --info */
  --accent-houseai:  #2F9E6B;             /* residential green, calmer than --success */

  /* =========================================================
   * TYPE
   * ========================================================= */

  --font-display: "Manrope", "Geist", "Söhne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter Tight", "Geist", "Söhne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — in rem. 1rem = 16px */
  --type-xs:    0.75rem;     /* 12 — caption, meta */
  --type-sm:    0.8125rem;   /* 13 — UI labels, eyebrow */
  --type-base:  0.9375rem;   /* 15 — body */
  --type-md:    1.0625rem;   /* 17 — lede */
  --type-lg:    1.25rem;     /* 20 — h4 */
  --type-xl:    1.5rem;      /* 24 — h3 */
  --type-2xl:   2rem;        /* 32 — h2 */
  --type-3xl:   2.75rem;     /* 44 — h1 small */
  --type-4xl:   3.75rem;     /* 60 — h1 default */
  --type-5xl:   5rem;        /* 80 — display */
  --type-6xl:   6.5rem;      /* 104 — hero display */

  /* Weight — tighter than usual; bias bold */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-display:  800;        /* hero/display only */

  /* Line height */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing — Manrope display benefits from slight tightening */
  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.025em;
  --tracking-tight:    -0.012em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.08em;

  /* =========================================================
   * SPACING — 4px grid
   * ========================================================= */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* =========================================================
   * RADII — square-ish but not severe
   * ========================================================= */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;     /* default for buttons, inputs, small cards */
  --radius-lg:   12px;    /* cards, panels, modal */
  --radius-xl:   16px;    /* HERO PANELS ONLY — not cards, tiles, or CTAs.
                             The SaaS rounded-2xl silhouette is rejected by doctrine
                             (see compliance.md § 7). New uses require a waiver. */
  /* --radius-2xl — RETIRED. Replaced by hairline borders + --radius-lg.
     Do not re-introduce. (Kept here as a tombstone to prevent re-creation.) */
  --radius-pill: 999px;

  /* =========================================================
   * SHADOWS — floating chrome only.
   * The two values below are reserved for elements that MUST visually
   * detach from the page (modal, toast, dropdown). Never apply to a
   * card sitting in normal page flow — cards use a 1px hairline border.
   * No coloured shadow. No focus glow. Focus is a 2px solid outline.
   * ========================================================= */
  --shadow-overlay:  0 16px 40px -12px rgba(11,13,18,0.18), 0 4px 8px rgba(11,13,18,0.04);
  --shadow-modal:    0 32px 64px -16px rgba(11,13,18,0.24), 0 8px 16px rgba(11,13,18,0.06);

  /* Focus ring — solid, no glow. Uses --accent on hairline outline. */
  --focus-ring: 2px solid var(--accent);

  /* =========================================================
   * MOTION — see motion.css for the source of truth.
   * The aliases below remain for legacy components only.
   * NEW work must use --ease and --t-* (defined in motion.css).
   * ========================================================= */
  /* legacy aliases (do not introduce new uses) */
  --ease-out:        var(--ease);
  --ease-emphasized: var(--ease);
  --ease-spring:     var(--ease);   /* spring is forbidden; alias to flat */
  --dur-1: var(--t-instant);
  --dur-2: var(--t-quick);
  --dur-3: var(--t-base);
  --dur-4: var(--t-slow);

  /* Layout */
  --container: 1240px;
  --container-narrow: 920px;
  --header-h: 64px;
}

/* =========================================================
 * DARK MODE — apply `.dark` to <html> or section
 * ========================================================= */
.dark, [data-theme="dark"] {
  --bg-0:       var(--ink-900);
  --bg-1:       var(--ink-900);
  --bg-2:       var(--ink-800);
  --bg-3:       var(--ink-700);
  --bg-inverse: var(--paper-50);
  --bg-inverse-2: var(--paper-100);

  --fg-1: var(--paper-50);
  --fg-2: var(--slate-300);
  --fg-3: var(--slate-400);
  --fg-disabled: var(--slate-600);
  --fg-inverse: var(--ink-900);

  --accent: var(--orange-400);
  --accent-hover: var(--orange-300);
  --accent-pressed: var(--orange-500);
  --accent-soft: rgba(249,122,61,0.14);

  --border-1: rgba(244,245,247,0.10);
  --border-2: rgba(244,245,247,0.16);
  --border-3: rgba(244,245,247,0.24);
  --border-strong: var(--paper-50);
}

/* =========================================================
 * BASE
 * ========================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--type-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--orange-500); color: #FFFFFF; }

/* =========================================================
 * TYPE UTILITIES — opt-in classes for consistency
 * ========================================================= */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--type-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}
.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--type-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.lede {
  font-size: var(--type-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  font-weight: var(--fw-regular);
}
.body { font-size: var(--type-base); line-height: var(--lh-normal); }
.caption { font-size: var(--type-xs); color: var(--fg-2); line-height: var(--lh-normal); }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "cv01"; }

/* Eyebrow — product UI element, not magazine kicker.
   Mono caps, optional small orange square preceding. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 1px;
}
.eyebrow--mute::before { background: var(--slate-300); }
.eyebrow--bare::before { display: none; }

/* Card — solid surface with subtle shadow. Optional orange left bar. */
.card {
  background: var(--bg-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
.card--accent { border-left: 3px solid var(--accent); }
.card--inverse { background: var(--bg-inverse); color: var(--fg-inverse); border-color: var(--border-inverse); }

/* Button primitives */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--type-base);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  text-decoration: none;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--secondary { background: var(--bg-0); color: var(--fg-1); border-color: var(--border-2); }
.btn--secondary:hover { border-color: var(--border-3); }
.btn--ghost { background: transparent; color: var(--fg-1); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--inverse { background: transparent; color: var(--fg-inverse); border-color: var(--border-inverse-2); }
.btn--inverse:hover { background: var(--paper-50); color: var(--ink-900); border-color: var(--paper-50); }

/* Pill — filled, not hairline */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--slate-100);
  color: var(--fg-1);
}
.pill--accent { background: var(--orange-100); color: var(--orange-700); }
.pill--success { background: rgba(16,185,129,0.12); color: #047857; }
.pill--warning { background: rgba(245,158,11,0.14); color: #B45309; }
.pill--info { background: rgba(59,130,246,0.12); color: #1D4ED8; }
.pill--inverse { background: rgba(244,245,247,0.10); color: var(--fg-inverse); }

/* =========================================================
 * MODE SCOPES — parent vs product
 * ---------------------------------------------------------
 * Parent DF4 surfaces (df4.uk, brand pages, research) are
 * light-first institutional: paper background, ink text,
 * orange used as a flag accent only. Dark mode is opt-in.
 *
 * Product surfaces inherit from these but may override:
 *   - FoxLitX is dark-first (developer surface)
 *   - Repolize is light-first
 *   - House AI is warm-paper light-first
 *
 * Apply [data-mode="parent"] on parent <html> or root layout.
 * Apply [data-mode="product-dev"] on FoxLitX / dev tooling.
 * Apply [data-mode="product-light"] on Repolize / House AI.
 *
 * data-brand goes on the SAME root element as data-mode for product
 * surfaces (FoxLitX, Repolize, House AI). Never on a parent page.
 * Never on random child components.
 * ========================================================= */
[data-mode="parent"] {
  --bg-0: var(--paper-0);
  --bg-1: var(--paper-50);
  --bg-2: var(--paper-100);
  --bg-3: var(--paper-200);
  --fg-1: var(--ink-900);
  --fg-2: var(--slate-500);
  --fg-3: var(--slate-400);
  --border-1: var(--slate-150);
  --border-2: var(--slate-200);
  --border-strong: var(--ink-900);
  --accent: var(--orange-500);
}

[data-mode="product-dev"] {
  --bg-0: var(--ink-900);
  --bg-1: var(--ink-900);
  --bg-2: var(--ink-800);
  --bg-3: var(--ink-700);
  --fg-1: var(--paper-50);
  --fg-2: var(--slate-300);
  --fg-3: var(--slate-400);
  --border-1: rgba(244,245,247,0.10);
  --border-2: rgba(244,245,247,0.16);
  --border-3: rgba(244,245,247,0.24);
  --border-strong: var(--paper-50);
  --accent: var(--orange-400);
}

[data-mode="product-light"] {
  --bg-0: var(--paper-0);
  --bg-1: var(--paper-50);
  --bg-2: var(--paper-100);
  --bg-3: var(--paper-200);
  --fg-1: var(--ink-900);
  --fg-2: var(--slate-500);
  --fg-3: var(--slate-400);
  --border-1: var(--slate-150);
  --border-2: var(--slate-200);
  --border-strong: var(--ink-900);
}

/* =========================================================
 * SUB-BRAND SCOPES — wrap a product shell in [data-brand="..."]
 * to swap accent + (for House AI) the warm paper surface.
 * Apply on the SAME root as data-mode for product surfaces.
 * Never on a DF4 parent page; never on random child components.
 * ========================================================= */
[data-brand="foxlitx"] {
  --accent: var(--accent-foxlitx);
  --accent-hover: var(--orange-600);
  --accent-pressed: var(--orange-700);
  --accent-soft: var(--orange-100);
}
[data-brand="repolize"] {
  --accent: var(--accent-repolize);
  --accent-hover: #1D4ED8;
  --accent-pressed: #1E3A8A;
  --accent-soft: #DBEAFE;
}
[data-brand="houseai"] {
  --accent: var(--accent-houseai);
  --accent-hover: #257A53;
  --accent-pressed: #1B5C3F;
  --accent-soft: #DCEFE4;
  /* Warm-paper surface set — House AI privilege only */
  --bg-0: #FFFDF9;
  --bg-1: #FAF8F4;
  --bg-2: #F2EEE6;
  --bg-3: #E9E3D6;
  --border-1: #E8E2D2;
  --border-2: #DAD2BD;
}

/* Focus — solid outline, never a glow. Applied uniformly. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Reduced-motion is sourced from motion.css. Do not redeclare here. */