/* Pinfluence Media Codex — design tokens (§5.2).
   Everything visual lives here. Edit here, never in component CSS. */

:root {
  /* ---- Surfaces: cool near-monochrome, not warm cream ---- */
  --bg:            #FAFAFB;
  --surface:       #FFFFFF;
  --surface-sunk:  #F4F4F6;
  --border:        #E6E6EA;
  --border-strong: #D2D2D9;

  /* ---- Ink ---- */
  --ink:           #1A1A1F;
  --ink-secondary: #4C4C4C;   /* brand gray */
  --ink-muted:     #8A8A94;

  /* ---- Accent: graphite, not red ----
     The interface is near-monochrome. Primary actions are dark gray, because a
     red button is the loudest thing on screen and it is pressed constantly —
     loudness should mean "careful", not "continue". */
  --accent:        #2E2E36;
  --accent-hover:  #16161A;
  --accent-wash:   #E9E9ED;   /* focus ring */

  /* ---- Brand red: the wordmark rule, and nothing else ----
     One small mark of brand colour, used in exactly one place per screen. If
     you find yourself reaching for this anywhere else, reach for graphite. */
  --brand:         #E60122;

  /* ---- Status: functional colour only, and desaturated ----
     These earn their colour by being rare. Muted so that a screen full of
     status chips still reads as a gray interface rather than a fruit salad. */
  --ok:      #3F7A57;  --ok-wash:      #EDF4EF;
  --warn:    #8A6A2F;  --warn-wash:    #F7F3E8;
  --danger:  #A24B42;  --danger-wash:  #F7EDEC;
  --info:    #45607F;  --info-wash:    #EEF1F5;
  --neutral: #6B6B76;  --neutral-wash: #F0F0F3;

  /* ---- Type ---- */
  --font-ui:      'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;  /* login + masthead ONLY */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:   11px;
  --text-sm:   12px;   /* dense table cells */
  --text-base: 13px;   /* default UI */
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   19px;   /* page titles */

  /* ---- 8px grid ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ---- Density (§5.5) ---- */
  --row-h: 34px;

  /* ---- Motion: three durations, one curve ---- */
  --dur-fast:   120ms;   /* button press, toggle, row hover */
  --dur-normal: 200ms;   /* drawer, modal */
  --dur-slow:   350ms;   /* route change */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);

  --radius:    5px;
  --radius-sm: 3px;
  --shadow:    0 1px 2px rgba(26,26,31,.06), 0 4px 12px rgba(26,26,31,.05);
}

[data-density="compact"]   { --row-h: 28px; --text-sm: 11px; }
[data-density="spacious"]  { --row-h: 44px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}