/* 2base UI tokens — canonical values. */
/* ============================================================================
   Seven primitives. Everything else is an alias or a color-mix of these.
   Danger red is the only extra: form errors need a hue the palette does not have.
   ============================================================================ */

:root {
  /* Primitives */
  --surface:       #ffffff; /* cards, header, modals */
  --paper:         #f0f2f2; /* page bg, tints, rules */
  --accent-soft:   #56d67f; /* highlight, selected, success wash */
  --accent:        #39aa5d; /* buttons, links, active */
  --accent-hover:  #268644; /* accent hover / pressed */
  --ink:           #292b32; /* primary text */
  --ink-deep:      #212329; /* rare decorative dark blocks */

  --tint:          var(--paper);
  --ink-hover:     color-mix(in srgb, var(--ink-deep) 88%, var(--surface));
  --muted:         color-mix(in srgb, var(--ink) 52%, var(--paper));
  --marker:        var(--accent-soft);
  --marker-tint:   color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
  --marker-dot:    var(--accent);
  --overlay:       color-mix(in srgb, var(--ink-deep) 42%, transparent);

  --accent-wash:        color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
  --accent-wash-strong: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));

  /* Legacy brand/gray scales — aliases only, so existing utilities keep working. */
  --brand-50:  var(--paper);
  --brand-100: var(--paper);
  --brand-200: color-mix(in srgb, var(--ink) 10%, var(--paper));
  --brand-300: color-mix(in srgb, var(--ink) 18%, var(--paper));
  --brand-400: color-mix(in srgb, var(--ink) 38%, var(--paper));
  --brand-500: var(--muted);
  --brand-600: var(--ink);
  --brand-700: var(--ink);
  --brand-800: var(--ink-deep);
  --brand-900: var(--ink-deep);
  --brand-950: var(--ink-deep);

  --gray-50:  var(--paper);
  --gray-100: var(--paper);
  --gray-200: var(--brand-200);
  --gray-300: var(--brand-300);
  --gray-400: var(--brand-400);
  --gray-500: var(--muted);
  --gray-600: color-mix(in srgb, var(--ink) 68%, var(--paper));
  --gray-700: color-mix(in srgb, var(--ink) 78%, var(--paper));
  --gray-800: var(--ink);
  --gray-900: var(--ink);

  /* Semantic surfaces */
  --color-surface:              var(--surface);
  --color-surface-soft:         var(--paper);
  --color-surface-hover:        var(--paper);
  --color-surface-strong:       var(--ink-deep);
  --color-surface-overlay:      color-mix(in srgb, var(--surface) 96%, transparent);
  --color-border:               var(--paper);      /* hairline on white */
  --color-border-control:       var(--brand-200);  /* inputs, chips, edge on paper */
  --color-border-hover:         var(--brand-300);
  --color-text-inverse:         var(--surface);
  --color-text-on-dark:         var(--surface);
  --color-text-on-dark-muted:   color-mix(in srgb, var(--surface) 62%, var(--ink-deep));
  --color-action-ghost-hover:   var(--accent-wash);
  --color-action-ghost-border:  color-mix(in srgb, var(--accent) 32%, var(--surface));

  --color-text-primary:   var(--ink);
  --color-text-secondary: var(--gray-600);
  --color-text-muted:     var(--muted);
  --color-text-faint:     var(--brand-400);

  /* Danger is the only extra hue. Success follows accent; warning is ink on paper. */
  --color-danger:          #dc2626;
  --color-danger-strong:   color-mix(in srgb, var(--color-danger) 82%, var(--ink));
  --color-danger-surface:  color-mix(in srgb, var(--color-danger) 8%, var(--surface));
  --color-danger-tint:     color-mix(in srgb, var(--color-danger) 14%, var(--surface));
  --color-danger-border:   color-mix(in srgb, var(--color-danger) 28%, var(--surface));
  --color-danger-dot:      var(--color-danger);
  --color-warning:         var(--ink);
  --color-warning-strong:  var(--ink-deep);
  --color-warning-surface: var(--paper);
  --color-warning-tint:    var(--paper);
  --color-warning-border:  var(--brand-300);
  --color-success:         var(--accent);
  --color-success-strong:  var(--accent-hover);
  --color-success-dot:     var(--accent-soft);

  /* Admin uses the same primitives. The rail is a decorative dark block. */
  --admin-canvas:          var(--paper);
  --admin-rail:            var(--ink-deep);
  --admin-rail-active:     color-mix(in srgb, var(--ink-deep) 88%, var(--surface));
  --admin-rail-hover:      color-mix(in srgb, var(--ink-deep) 82%, var(--surface));
  --admin-rail-border:     color-mix(in srgb, var(--surface) 12%, var(--ink-deep));
  --admin-text-on-rail:    var(--surface);
  --admin-text-rail:       color-mix(in srgb, var(--surface) 78%, var(--ink-deep));
  --admin-text-rail-muted: color-mix(in srgb, var(--surface) 42%, var(--ink-deep));
  --admin-text-primary:    var(--ink);
  --admin-text-muted:      var(--muted);
  --admin-text-faint:      var(--color-text-faint);
  --admin-text-soft:       var(--color-text-faint);
  --admin-row-hover:       var(--surface);
  --admin-action-hover:    var(--admin-rail-hover);
  --admin-ghost-hover:     var(--paper);
  --admin-link:            var(--accent);
  --admin-link-hover:      var(--accent-hover);

  --radius-xs: 0.25rem; /* 4 */
  --radius-sm: 0.5rem;  /* 8 */
  --radius-md: 0.75rem; /* 12 */
  --radius-lg: 1rem;    /* 16 */
  --radius-pill: 999px;

  --font-weight-body: 500;
  --font-weight-strong: 600;
  --letter-spacing: 0;
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 2rem;      /* 32 */

  --control-height: 2.75rem; /* 44 */

  /* One spacing scale for public page composition. Component internals may
     use smaller values, but page shells, breadcrumbs, heroes and section
     stacks must resolve through these tokens. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --page-space-top: var(--space-6);
  --page-space-bottom: var(--space-16);
  --page-hero-gap: var(--space-8);
  --page-section-gap: var(--space-10);

  --z-base: 1;
  --z-raised: 40;
  --z-sticky: 50;
  --z-overlay: 60;
  --z-modal: 70;

  --shadow-elevated:       0 18px 40px color-mix(in srgb, var(--ink-deep) 8%, transparent);
  --shadow-mega:           0 26px 60px -22px color-mix(in srgb, var(--ink-deep) 40%, transparent);

  --transition-fast: 160ms ease;
  --transition-mid:  220ms ease;

  --ring-focus: 0 0 0 3px var(--marker-tint);
  --ring-focus-neutral: 0 0 0 4px color-mix(in srgb, var(--ink) 18%, transparent);
  --ring-focus-danger:  0 0 0 4px color-mix(in srgb, var(--color-danger) 18%, transparent);

  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23292B32' stroke-opacity='0.52' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* One page shell. Prose is an inner reading column, not a page type. */
  --container-wide: 90rem;
  --container-prose: 48rem;
  --page-gutter: 1rem;
  --rail-width: 15rem; /* 240 */
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  --app-header-height: 4rem;
}

@media (min-width: 640px)  { :root { --page-gutter: 1.5rem; } }
@media (min-width: 1024px) {
  :root {
    --page-gutter: 2rem;
    --page-space-top: var(--space-8);
    --app-header-height: 106px;
  }
}