/* =============================================================================
 * shared/tokens.css — the single source of design truth for MDedit.
 *
 * PURPOSE   Declares every design token (colour, radius, spacing, type scale,
 *           elevation, z-index, motion) as a CSS custom property on :root.
 *           Nothing else lives here — no selectors, no components.
 * PROVIDES  --accent*, --ink/--muted/--border…, --r-*, --pad-x, --fs-*,
 *           --shadow-*, --z-*, --ease/--t-fast, and the categorical --c-* palette.
 * USED BY   base.css, components.css, prose.css and every page's styles.css.
 *           Load FIRST, before any other stylesheet.
 * NOTE      tonkiOS language: light mode only, a single blue action accent.
 *           The --c-* palette is categorical data-viz (folder identity) and is
 *           never used as the action accent. No purple, per brand.
 * ============================================================================= */

:root {
  /* Accent — the one action/focus colour */
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-ring: rgb(37 99 235 / .12);

  /* Neutral ramp */
  --ink: #171717;
  --ink-2: #404040;
  --muted: #737373;
  --faint: #a3a3a3;
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --surface: #ffffff;
  --surface-1: #fafafa;   /* subtle row / button hover */
  --surface-2: #f5f5f5;   /* tracks, muted badges */

  /* Categorical folder palette (data identity, never the action accent) */
  --c-work: #0284c7;      /* sky    */
  --c-personal: #059669;  /* emerald — also reused as the "success" colour */
  --c-recipes: #d97706;   /* amber  */
  --c-research: #e11d48;  /* rose   */
  --c-travel: #0d9488;    /* teal   */
  --c-ideas: #65a30d;     /* lime   */
  --c-drafts: #64748b;    /* slate  */
  --c-system: #171717;    /* ink    */

  /* Radii */
  --r-xs: .375rem;
  --r-sm: .5rem;
  --r-md: .6rem;
  --r-lg: .75rem;
  --r-pill: 9999px;

  /* Horizontal page gutter — scales with viewport (see media queries) */
  --pad-x: 1rem;

  /* Type scale */
  --fs-xs: 10.5px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 12.5px;
  --fs-lg: 13px;
  --fs-title: 28px;

  /* Sizing */
  --header-h: 3.5rem;
  --content-max: 680px;

  /* Elevation */
  --shadow-pop: 0 14px 36px -14px rgb(0 0 0 / .28);
  --shadow-lift: 0 10px 22px -16px rgb(0 0 0 / .28);

  /* Z-index scale (no arbitrary z values elsewhere) */
  --z-toolbar: 30;
  --z-pop: 40;
  --z-menu: 45;
  --z-header: 50;   /* the app header sits above page content + its own popovers */

  /* Motion */
  --ease: cubic-bezier(.16, .84, .3, 1);
  --t-fast: .15s;
}

/* Gutter widens on tablet/desktop; title eases down on small phones. */
@media (min-width: 481px)  { :root { --pad-x: 1.25rem; } }
@media (min-width: 1025px) { :root { --pad-x: 1.5rem; } }
@media (max-width: 480px)  { :root { --fs-title: 23px; } }