/* =============================================================
 * Praxis Engine — Colors & Type
 * Single source of truth for color tokens + type scale.
 * Lifted from source/tokens.css + source/canvas-tokens.css and
 * simplified into a flat, portable interface.
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;

  /* ---------- Surfaces (army-green near-black suite) ---------- */
  --bg:            #0a0f0b;           /* app background */
  --bg-edge:       #050805;           /* vignette edge (landing) */
  --bg-card:       #111711;           /* cards, panels */
  --bg-alt:        #172016;           /* nested / muted regions */
  --bg-input:      rgba(8,13,9,0.96);
  --bg-editor:     #0f160f;

  /* ---------- Foreground (warm paper, never pure white) ---------- */
  --fg1:           #f5f1e8;           /* primary text */
  --fg2:           #9b9488;           /* muted body / metadata */
  --fg3:           #706b62;           /* disabled, tertiary */
  --fg-faint:      #3a3a3a;           /* rules at the faintest tier */
  --fg-inverse:    #090909;           /* text on light fills */

  /* ---------- Brand / accent ---------- */
  --accent:        #e8b840;           /* golden yellow — primary accent */
  --accent-strong: #ffd66b;           /* brighter gold — active emphasis */
  --accent-warm:   #e8b840;           /* golden authority tint */
  --brand-2:       #8b929d;           /* cool slate, rarely used */
  --brand-legacy:  #6cb6ff;           /* legacy blue, archival */

  /* ---------- Semantic status ---------- */
  --success:       #3fb950;
  --success-bright:#7ee787;
  --warning:       #e8b840;
  --warning-strong:#ffd66b;
  --danger:        #f85149;
  --danger-soft:   #ff8a6a;           /* the only tinted edge on canvas */

  /* ---------- Translucent surfaces ---------- */
  --surface-hover:         rgba(222,236,197,0.045);
  --surface-muted:         rgba(222,236,197,0.032);
  --surface-subtle:        rgba(222,236,197,0.022);
  --surface-accent-soft:   rgba(232,184,64,0.10);
  --surface-accent-strong: rgba(232,184,64,0.26);
  --surface-success-soft:  rgba(63,185,80,0.15);
  --surface-warning-soft:  rgba(232,184,64,0.15);
  --surface-danger-soft:   rgba(248,81,73,0.15);

  /* ---------- Borders / rules ---------- */
  --border:            #283027;
  --border-soft:       rgba(222,236,197,0.09);
  --border-faint:      rgba(222,236,197,0.05);
  --border-accent:     rgba(232,184,64,0.30);
  --border-success:    rgba(63,185,80,0.30);
  --border-warning:    rgba(232,184,64,0.34);
  --border-danger:     rgba(248,81,73,0.30);

  /* ---------- Shadows / elevation ---------- */
  --shadow-card:     0 18px 42px rgba(0,0,0,0.28), 0 10px 28px rgba(8,18,10,0.22), 0 0 0 1px rgba(222,236,197,0.045);
  --shadow-panel:    0 14px 38px rgba(0,0,0,0.32), 0 8px 24px rgba(8,18,10,0.18);
  --shadow-popover:  0 14px 36px rgba(0,0,0,0.44);
  --shadow-modal:    0 20px 56px rgba(0,0,0,0.42);
  --shadow-drawer:   -2px 0 8px rgba(0,0,0,0.50);
  --shadow-ambient:  0 20px 50px rgba(0,0,0,0.40);
  --shadow-lifted:   0 30px 70px rgba(0,0,0,0.50);

  /* Elevated surface gradients (paper-over-dark look) */
  --surface-elevated: linear-gradient(180deg, rgba(238,232,205,0.055), rgba(141,165,102,0.026));
  --surface-raised:   linear-gradient(180deg, rgba(238,232,205,0.05), rgba(141,165,102,0.024));

  /* ---------- Glows (restrained; key Praxis signature) ---------- */
  --glow-soft:     0 0 0 1px rgba(243,238,228,0.16), 0 0 18px rgba(243,238,228,0.10);
  --glow-strong:   0 0 0 1px rgba(255,255,255,0.22), 0 0 24px rgba(255,255,255,0.14);
  --glow-amber:    0 0 18px rgba(232,184,64,0.32), 0 0 0 1px rgba(0,0,0,0.34);
  --glow-success:  0 0 14px rgba(63,185,80,0.24),  0 0 0 1px rgba(0,0,0,0.34);
  --glow-danger:   0 0 14px rgba(248,81,73,0.24),  0 0 0 1px rgba(0,0,0,0.34);

  /* ---------- Backdrop / page ornament ---------- */
  --backdrop: radial-gradient(circle at top left, rgba(243,238,228,0.08), transparent 24%),
              radial-gradient(circle at top right, rgba(232,184,64,0.08), transparent 18%),
              radial-gradient(circle at 50% 110%, rgba(63,185,80,0.04), transparent 20%),
              linear-gradient(180deg, rgba(255,255,255,0.015), transparent 18%);
  --grid-accent:   rgba(222,236,197,0.045);
  --selection-bg:  rgba(243,238,228,0.22);

  /* ---------- Radii ---------- */
  --radius-sm:  6px;   /* inputs on landing page   */
  --radius:    10px;   /* default tokens radius    */
  --radius-md: 12px;   /* buttons (Canvas)           */
  --radius-lg: 16px;   /* cards, panels (Canvas)     */
  --radius-xl: 20px;   /* dock items (Canvas)        */
  --radius-2xl:22px;   /* dock rails               */
  --radius-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl:48px;
  --space-3xl:64px;

  /* ---------- Motion ---------- */
  --motion-micro:  100ms ease;
  --motion-fast:   160ms ease;
  --motion-node:   180ms ease;
  --motion-dock:   240ms ease;

  /* ---------- Type families ----------
   * Two products, two stacks.
   *   - Canvas dashboard & tokens: Space Grotesk (geometric grotesk) + IBM Plex Mono.
   *   - praxisengine.io landing: Inter + JetBrains Mono.
   * Treat Space Grotesk / IBM Plex as the canonical system;
   * Inter / JetBrains remain in the landing file until it's re-skinned.
   */
  --font-sans:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
  --font-landing: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-landing-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (px) ---------- */
  --fs-xxs: 11px;   /* eyebrow / badge           */
  --fs-xs:  12px;   /* metadata, tags            */
  --fs-sm:  13px;   /* dense UI copy             */
  --fs-md:  14px;   /* body (Canvas default)       */
  --fs-lg:  16px;   /* body (landing default)    */
  --fs-xl:  18px;   /* lede                      */
  --fs-2xl: 20px;   /* section titles            */
  --fs-3xl: 28px;   /* h2                        */
  --fs-4xl: 36px;   /* h1 (compact)              */
  --fs-hero: 52px; /* hero h1 on landing */

  /* ---------- Weights / tracking ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:   0em;      /* headlines */
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;   /* small caps labels */
  --tracking-xwide:   0.14em;   /* uppercase meta / footer */
  --tracking-micro:   0.04em;   /* status mono */

  --leading-tight: 1.08;        /* h1 */
  --leading-snug:  1.25;
  --leading-body:  1.5;
  --leading-lede:  1.55;
}

/* =============================================================
 * Semantic element styles — drop <link> this file and write
 * bare HTML; headings, code, meta labels render on brand.
 * ============================================================= */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--fg1); }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--fg1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-4xl); line-height: var(--leading-tight); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl);  font-weight: var(--fw-medium); }

p   { color: var(--fg1); font-size: inherit; line-height: var(--leading-body); margin: 0; text-wrap: pretty; }
.lede, p.lede { color: var(--fg2); font-size: var(--fs-xl); line-height: var(--leading-lede); max-width: 52ch; }
.muted { color: var(--fg2); }
.dim   { color: var(--fg3); }

code, kbd, pre, samp, .mono {
  font-family: var(--font-mono);
}
code {
  font-size: 0.92em;
  color: var(--fg1);
  background: var(--surface-muted);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}
pre {
  font-size: var(--fs-sm);
  background: var(--bg-editor);
  color: var(--fg1);
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: auto;
}

/* Uppercase meta-label — Praxis signature treatment */
.eyebrow, .meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg2);
  font-weight: var(--fw-regular);
}

/* Status mono — 'STATUS · PRIVATE BETA' style */
.status-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-micro);
  color: var(--fg2);
}

a {
  color: var(--fg1);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
a:hover { border-color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

input, textarea, select, button { font: inherit; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243,238,228,0.12), 0 0 0 1px rgba(243,238,228,0.30);
}