/* ============================================================
   Stravito brand palette — canonical source.
   This file is the source of truth for Stravito's visual identity
   across internal web apps. Use these tokens in your own components.

   If your app genuinely needs an additional colour, add it as a
   NEW token below (don't redefine the existing ones) and note why
   in CLAUDE.md or a PR description — palette divergence should be
   a deliberate choice, not drift.

   The `.claude/skills/design-palette` skill auto-loads when you
   prompt Claude / Codex / Cursor about UI work and points your
   assistant at these tokens.
   ============================================================ */

:root {
  /* Background scale (white → tinted-pink → deeper-pink wash) */
  --bg: #ffffff;
  --bg-2: #fbf6fa;
  --bg-3: #f4ecf2;

  /* Ink scale (Stravito deep purple → lavender, for text + chrome) */
  --ink: #5d0048;
  --ink-2: #7c2c69;
  --ink-3: #a371a0;
  --ink-4: #c5a8c2;

  /* Rules / dividers (soft pink-grey) */
  --rule: #ead7e6;
  --rule-strong: #d6b4cf;

  /* Accent (the signature Stravito pink) */
  --accent: #e91e8c;        /* default — links, primary CTAs */
  --accent-hover: #f04682;  /* hover state */
  --accent-soft: #fcd9eb;   /* tinted backgrounds */
  --accent-tint: #fce8f3;   /* very-light tint */

  /* Deep accent (magenta, used sparingly for emphasis) */
  --magenta: #c2185b;
  --magenta-deep: #94114a;

  /* Semantic colours (recoloured around the brand) */
  --crimson: #b00020;
  --crimson-soft: #ffd9df;
  --moss: #2f6f3a;
  --moss-soft: #d9eddd;
  --steel: #2b4d7a;
  --steel-soft: #d8e1ef;

  /* Typography */
  --font-display: "Poppins", -apple-system, "Helvetica Neue", "Arial Nova", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Transitions */
  --tx: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-theme="dark"] {
  --bg: #1a0e17;
  --bg-2: #221220;
  --bg-3: #2c1928;

  --ink: #ffd0ea;
  --ink-2: #e2a5c9;
  --ink-3: #a07a92;
  --ink-4: #715666;

  --rule: #3a1f33;
  --rule-strong: #4e2945;

  --accent: #ff58a8;
  --accent-hover: #ff7ab8;
  --accent-soft: #4a1632;
  --accent-tint: #2f0f22;

  --magenta: #ff5697;
  --magenta-deep: #ff7fb1;

  --crimson: #ff8896;
  --crimson-soft: #401820;
  --moss: #8fc89b;
  --moss-soft: #1d2e22;
  --steel: #8eb0d6;
  --steel-soft: #1c2939;
}

/* Minimal base styles — enough to render readably. Replace or
   extend in your own components. */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--tx);
}
a:hover { color: var(--accent-hover); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

button {
  font: inherit;
  cursor: pointer;
}