/* =====================================================================
   Ferrith brand tokens — derived from the brand guidelines
   ===================================================================== */
:root {
  /* Primary palette */
  --anthracite: #2C3138;
  --anthracite-90: #3a4049;
  --anthracite-70: #5a606a;
  --anthracite-50: #8a8f97;
  --anthracite-20: #d6d8db;
  --anthracite-08: #ecedee;
  --thermal: #FF8E46;
  --thermal-70: #ffa971;
  --thermal-40: #ffd1b1;
  --thermal-12: #fff0e3;
  --liquid: #B8D7F5;
  --liquid-30: #e7f1fb;
  --concrete: #DDDDDD;
  --concrete-light: #f3f4f5;

  /* Functional roles */
  --bg: #ffffff;
  --bg-muted: #f7f8f9;
  --bg-subtle: #fbfbfc;
  --border: #e5e6e8;
  --border-strong: #d4d6d9;
  --ink: #1a1d22;
  --ink-secondary: #5a606a;
  --ink-tertiary: #8a8f97;

  /* Semantic */
  --success: #2f7a4f;
  --success-bg: #e9f4ee;
  --warning: var(--thermal);
  --warning-bg: var(--thermal-12);
  --danger: #c8453a;
  --danger-bg: #fbeae8;

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;

  /* Radius / spacing */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --chamfer: 10px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 24, 30, 0.04), 0 1px 1px rgba(20, 24, 30, 0.03);
  --shadow-md: 0 2px 6px rgba(20, 24, 30, 0.06), 0 4px 12px rgba(20, 24, 30, 0.05);
  --shadow-lg: 0 8px 32px rgba(20, 24, 30, 0.12);
}

/* Chamfered (octagonal) corner — Ferrith signature shape.
   Use --chamfer to control the bite. */
.ferrith-chamfer {
  clip-path: polygon(
    var(--chamfer) 0%,
    calc(100% - var(--chamfer)) 0%,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0% calc(100% - var(--chamfer)),
    0% var(--chamfer)
  );
}
.ferrith-chamfer-sm { --chamfer: 6px; }
.ferrith-chamfer-lg { --chamfer: 14px; }

/* Modular matrix — small ambient grid lifted from the logo geometry.
   Used at low opacity as background texture. */
.ferrith-matrix-bg {
  background-image:
    linear-gradient(rgba(44, 49, 56, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 49, 56, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

body, html { margin: 0; padding: 0; }
* { box-sizing: border-box; }