/* 2base UI tokens — canonical values. See docs/UI_CONTRACT.md. */
/* ============================================================================
   2BASE.RU — Custom Styles (supplements Tailwind CSS)
   Only styles that Tailwind utility classes cannot provide.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Design tokens — single source of truth for colors, radii, shadows and transitions.`n   Tailwind utilities resolve through these variables, so re-skinning starts here`n   instead of hunting literal values across templates.
   ---------------------------------------------------------------------------- */
:root {
  /* Redesign 2026-07 (source of truth: docs/design/ offline mockup).
     Ink-on-paper neutral language: near-black CTAs, #fafafa paper, #f0f0f3
     tint surfaces, #e9fb4e marker highlight. The "brand" scale keeps its
     name so 30+ templates re-skin through tokens: 600+ are CTA inks
     (hover 700 is LIGHTER — dark-button behavior), 500 and below are grays. */
  --brand-50:  #f5f5f7;
  --brand-100: #f0f0f3;
  --brand-200: #e2e3e8;
  --brand-300: #cbccd3;
  --brand-400: #9a9da4;
  --brand-500: #7e8287;
  --brand-600: #1a1a1a;
  --brand-700: #2e2e35;
  --brand-800: #111113;
  --brand-900: #0c0c0e;
  --brand-950: #060607;

  /* Mockup primitives (used by components below and by new partials) */
  --paper:       #fafafa;
  --tint:        #f0f0f3;
  --ink:         #1a1a1a;
  --ink-hover:   #2e2e35;
  --muted:       #7e8287;
  --marker:      #e9fb4e;
  --marker-tint: #f0fa9e;
  --marker-dot:  #c9d926;
  --overlay:     rgba(20, 19, 17, 0.42);

  /* Neutrals (warm neutral, replaces the old slate scale) */
  --gray-50:  #fafafa;
  --gray-100: #f0f0f3;
  --gray-200: #e4e4e8;
  --gray-300: #cfd0d4;
  --gray-400: #a2a5aa;
  --gray-500: #7e8287;
  --gray-600: #5b5f64;
  --gray-700: #3f4246;
  --gray-800: #2e2e35;
  --gray-900: #1a1a1a;

  /* Semantic surfaces */
  --color-surface:              #ffffff;
  --color-surface-soft:         var(--gray-50);
  --color-surface-hover:        var(--brand-50);
  --color-surface-strong:       var(--gray-900);
  --color-surface-overlay:      rgba(255, 255, 255, 0.96);
  --color-border:               #f0f0f3;
  --color-border-soft:          #f0f0f3;
  --color-border-data:          #e5edf5;
  --color-text-inverse:         #ffffff;
  --color-action-ghost-hover:   #dff7ee;
  --color-action-ghost-border:  #baf3da;

  /* Text tokens (paired with WCAG AA contrast on white) */
  --color-text-primary:   var(--ink);        /* 17.4:1 on white */
  --color-text-secondary: var(--gray-600);   /* 6.8:1 — body */
  --color-text-muted:     var(--gray-500);   /* 4.6:1 — minimum AA */
  --color-text-faint:     var(--gray-400);   /* decorative only, aria-hidden */

  /* Status (success is its own green now — no longer aliased to brand) */
  --color-danger:          #dc2626;
  --color-danger-strong:   #b91c1c;
  --color-danger-surface:  #fef2f2;
  --color-danger-tint:     #fee2e2;
  --color-danger-border:   #fecaca;
  --color-danger-dot:      #ef4444;
  --color-warning:         #d97706;
  --color-warning-strong:  #92400e;
  --color-warning-surface: #fffbeb;
  --color-warning-tint:    #fef3c7;
  --color-warning-border:  #fde68a;
  --color-success:         #16a34a;
  --color-success-strong:  #15803d;
  --color-success-dot:     #22c55e;  /* Admin palette: dense operational surfaces keep a warm paper/ink variant. */
  --admin-canvas:          #efece7;
  --admin-rail:            #1c1c20;
  --admin-rail-active:     #26262b;
  --admin-rail-hover:      #33333a;
  --admin-rail-border:     #2c2c31;
  --admin-text-on-rail:    #ffffff;
  --admin-text-rail:       #c9c6bf;
  --admin-text-rail-muted: #6a6a62;
  --admin-text-primary:    var(--ink);
  --admin-text-muted:      #6b6862;
  --admin-text-faint:      #9a968e;
  --admin-text-soft:       #a09c94;
  --admin-border:          #e8e5df;
  --admin-border-strong:   #e5e2db;
  --admin-border-soft:     #eeece7;
  --admin-control-border:  #d8d4cc;
  --admin-row-hover:       #faf9f6;
  --admin-action-hover:    #33333a;
  --admin-ghost-hover:     #f4f2ee;
  --admin-link:            #1a6b47;
  --admin-link-hover:      #0c7a52;
  --admin-shadow-nav:      0 1px 3px rgba(15, 23, 42, 0.08);

  /* Radii — mockup steps: 8px small, 10px controls, 14px cards */
  --radius-xs: 0.5rem;     /* 8px — chips and badges */
  --radius-sm: 0.5rem;     /* 8px — compact controls */
  --radius-md: 0.625rem;   /* 10px — buttons and inputs */
  --radius-lg: 0.875rem;   /* 14px — cards and large surfaces */

  /* Interactive border tokens (hover states) */
  --color-border-hover:      #c6c6cd;   /* hover border for forms/buttons */
  --color-border-link-hover: #e4e4e8;   /* hover for link cards */

  /* Flat product surfaces; elevation is reserved for overlays and menus. */
  --shadow-card:           none;
  --shadow-card-hover:     none;
  --shadow-card-tinted:    none;
  --shadow-button:         none;
  --shadow-button-tinted:  none;
  --shadow-elevated:       0 18px 40px rgba(20, 19, 17, 0.08);
  --shadow-mega:           0 26px 60px -22px rgba(20, 19, 17, 0.4);

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-mid:  220ms ease;

  /* Focus ring (keyboard) — mockup: 3px marker-tint halo */
  --ring-focus: 0 0 0 3px var(--marker-tint);
  --ring-focus-neutral: 0 0 0 4px rgba(126, 130, 135, 0.18);
  --ring-focus-danger:  0 0 0 4px rgba(220, 38, 38, 0.18);

  /* Keep the encoded chevron with the tokens, not each select component. */
  --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='%237e8287' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Layout and typography (mockup container: 1440px, 32px gutter on desktop) */
  --container-wide: 90rem;
  --container-prose: 48rem;
  --container-status: 34rem;   /* 544px — вход, отписка, статусы, 404 */
  --page-gutter: 1rem;
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}

@media (min-width: 640px)  { :root { --page-gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --page-gutter: 2rem; } }