/* sako-internal — global CSS variables + cascade layer order */

@layer reset, base, components, modules, utilities;

:root {
  /* ─── Font ────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* ─── Type scale ──────────────────────────────────────────── */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.3125rem;   /* 21px */
  --text-xl:   1.75rem;     /* 28px */

  /* ─── Spacing ─────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  --page-px: clamp(16px, 4vw, 40px);

  /* ─── Colors ──────────────────────────────────────────────── */
  --bg:        #f5f5f0;          /* warm off-white page background */
  --surface:   #ffffff;          /* card / panel surface */
  --surface-2: #f0f0eb;          /* dimmed surface (panel headers) */
  --border:    #d8d8d0;          /* borders */
  --border-light: #e8e8e2;       /* very light separators */

  --ink:       #1a1a1a;          /* primary text */
  --ink-2:     #6b6b66;          /* secondary / muted text */
  --ink-3:     #a8a8a0;          /* placeholder / disabled */

  --accent:    #2563eb;          /* primary accent — Apple-ish blue */
  --accent-bg: #eff6ff;          /* light accent tint */

  --green:     #16a34a;
  --green-bg:  #f0fdf4;
  --red:       #dc2626;
  --red-bg:    #fef2f2;
  --amber:     #d97706;
  --amber-bg:  #fffbeb;

  /* ─── Radius ──────────────────────────────────────────────── */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  /* ─── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 6px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);

  /* ─── Z-index ─────────────────────────────────────────────── */
  --z-nav:    30;
  --z-dialog: 70;

  /* Compat aliases used by older component CSS */
  --color-canvas:      var(--surface);
  --color-canvas-dim:  var(--surface-2);
  --color-ink:         var(--ink);
  --color-ink-dark:    var(--ink);
  --color-ink-medium:  var(--ink-2);
  --color-ink-light:   var(--ink-3);
  --color-ink-inverted:#ffffff;
  --color-link:        var(--accent);
  --color-link-hover:  var(--accent);
  --color-selected:    var(--accent-bg);
  --color-negative:    var(--red);
  --color-negative-bg: var(--red-bg);
  --color-positive:    var(--green);
  --color-positive-bg: var(--green-bg);
  --border-color:      var(--border);
  --inline-space:      var(--space-3);
  --inline-space-half: var(--space-2);
  --inline-space-double: var(--space-6);
  --block-space:       var(--space-4);
  --block-space-half:  var(--space-2);
  --block-space-double:var(--space-8);
  --radius-pill:       99rem;
  --focus-ring:        2px solid var(--accent);
  --focus-ring-offset: 2px;
  --text-small:        var(--text-sm);
  --text-normal:       var(--text-base);
  --text-medium:       var(--text-md);
  --text-large:        var(--text-lg);
  --text-x-large:      var(--text-xl);
  --main-padding:      var(--page-px);
}

*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}