/*
  χωρίς μεσίτη — design tokens
  Two layers:
    1. Primitives: raw palette. Never used directly by components.
    2. Semantic:   what components use. Re-theme the whole site by editing this layer only.
  See STYLEGUIDE.md for the rules.
*/

:root {
  /* ── 1. Primitives ─────────────────────────────── */

  /* Sand: backgrounds and surfaces */
  --sand-0:   #FFFDFB;
  --sand-50:  #FBF7F3;
  --sand-100: #F4EDE6;
  --sand-200: #EAE0D7;
  --sand-300: #DACBBE;

  /* Clay: the brand */
  --clay-300: #CDAA9A;
  --clay-400: #B98D7A;
  --clay-500: #A57562;
  --clay-600: #8A5E4D;
  --clay-700: #6E4A3C;

  /* Olive: trust, success, "verified" */
  --olive-100: #E7EADB;
  --olive-500: #6B7550;
  --olive-700: #4F5739;

  /* Ochre: warnings, highlights */
  --ochre-100: #F6E9D2;
  --ochre-600: #A87A2F;

  /* Brick: errors */
  --brick-100: #F5DFD8;
  --brick-600: #A4472F;

  /* Ink: text */
  --ink-900: #2B221D;
  --ink-700: #4D413A;
  --ink-500: #7B6D63;
  --ink-300: #AA9C91;

  /* ── 2. Semantic ───────────────────────────────── */

  /* Surfaces: separation comes from tone and shadow, never borders */
  --color-bg:             var(--sand-50);
  --color-surface:        var(--sand-0);
  --color-surface-sunken: var(--sand-100);
  --color-surface-strong: var(--sand-200);

  /* Text */
  --color-text:        var(--ink-900);
  --color-text-muted:  var(--ink-500);
  --color-text-subtle: var(--ink-300);
  --color-text-on-brand: var(--sand-0);

  /* Brand */
  --color-brand:        var(--clay-500);
  --color-brand-hover:  var(--clay-600);
  --color-brand-strong: var(--clay-700);
  --color-brand-soft:   var(--sand-200);

  /* Status */
  --color-success:      var(--olive-500);
  --color-success-soft: var(--olive-100);
  --color-warning:      var(--ochre-600);
  --color-warning-soft: var(--ochre-100);
  --color-danger:       var(--brick-600);
  --color-danger-soft:  var(--brick-100);

  --color-focus: var(--clay-400);

  /* Typography */
  --font-sans: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.8125rem;  /* 13 */
  --text-sm:   0.9375rem;  /* 15 */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.75rem;    /* 28 */
  --text-2xl:  2.5rem;     /* 40 */
  --text-display: clamp(2.5rem, 7vw, 4.75rem);
  --text-hero-number: clamp(3rem, 11vw, 7.5rem); /* the one shock number per page */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  --leading-tight: 1.1;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;

  /* Spacing: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows: warm-tinted, soft */
  --shadow-sm: 0 1px 2px rgba(75, 50, 35, 0.06), 0 2px 6px rgba(75, 50, 35, 0.04);
  --shadow-md: 0 4px 12px rgba(75, 50, 35, 0.07), 0 12px 32px rgba(75, 50, 35, 0.06);
  --shadow-lg: 0 12px 40px rgba(75, 50, 35, 0.12);

  /* Layout */
  --container: 1080px;
  --gutter: var(--space-5);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;
}

@media (max-width: 720px) {
  :root { --gutter: var(--space-4); }
}