/* Design tokens — the single place the visual identity is defined.
 *
 * Phase 0 ships neutral placeholder values. The Joris Wayne palette,
 * typography and graphic language are applied in a later session by
 * editing THIS FILE ONLY. No component may hard-code a colour, a radius
 * or a spacing value.
 */

:root {
  /* --- Colors: neutrals --- */
  --color-bg:            #ffffff;
  --color-bg-subtle:     #f6f6f4;
  --color-surface:       #ffffff;
  --color-border:        #e3e3df;
  --color-border-strong: #c9c9c3;
  --color-text:          #1a1a18;
  --color-text-muted:    #6b6b66;
  --color-text-inverse:  #ffffff;

  /* --- Colors: accent (placeholder) --- */
  --color-accent:        #2d2d2a;
  --color-accent-hover:  #000000;
  --color-accent-subtle: #f0f0ec;

  /* --- Colors: semantic --- */
  --color-positive:      #1f7a4d;
  --color-negative:      #b3261e;
  --color-warning:       #96601a;
  --color-info:          #1b5e8a;
  --color-neutral:       #6b6b66;

  /* --- Typography --- */
  --font-sans:  system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    650;

  --leading-tight: 1.2;
  --leading-base:  1.5;

  /* --- Spacing (4px base) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);

  /* --- Layout --- */
  --container-max: 1280px;
  --sidebar-width: 240px;
}

/* --- Breakpoints (documented; media queries must use these values) ---
 *   sm  480px   phone
 *   md  768px   tablet portrait
 *   lg  1024px  tablet landscape / small laptop
 *   xl  1280px  desktop
 * CSS custom properties cannot be used inside @media, so the numbers are
 * repeated in the queries. Keep them in sync with this block.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #131311;
    --color-bg-subtle:     #1b1b19;
    --color-surface:       #1e1e1b;
    --color-border:        #32322e;
    --color-border-strong: #4a4a45;
    --color-text:          #f2f2ee;
    --color-text-muted:    #a3a39c;
    --color-text-inverse:  #131311;
    --color-accent:        #f2f2ee;
    --color-accent-hover:  #ffffff;
    --color-accent-subtle: #262622;
    --color-positive:      #4ec98a;
    --color-negative:      #f2877f;
    --color-warning:       #e0a758;
    --color-info:          #6fb8e0;
  }
}

:root[data-theme="dark"] {
  --color-bg:            #131311;
  --color-bg-subtle:     #1b1b19;
  --color-surface:       #1e1e1b;
  --color-border:        #32322e;
  --color-border-strong: #4a4a45;
  --color-text:          #f2f2ee;
  --color-text-muted:    #a3a39c;
  --color-text-inverse:  #131311;
  --color-accent:        #f2f2ee;
  --color-accent-hover:  #ffffff;
  --color-accent-subtle: #262622;
  --color-positive:      #4ec98a;
  --color-negative:      #f2877f;
  --color-warning:       #e0a758;
  --color-info:          #6fb8e0;
}