/* ============================================================
   ПОЛНЫЙ ДОСТУП — Design Tokens
   vars.css  |  full-access.ru
   Single source of truth for all visual tokens.
   Templates load this file, then base.css, then page-specific styles.
   ============================================================ */

/* ── BRAND GREEN RAMP ─────────────────────────────────────── */
:root {
  --green-50:  #eaf6ee;
  --green-100: #c0ddc8;
  --green-200: #7dbb91;
  --green-400: #3dba6f;   /* accent dark theme  */
  --green-600: #1f8c4a;   /* primary CTA        */
  --green-800: #155e32;
  --green-900: #0a3319;

  /* Shield gray ramp (green-tinted) */
  --gray-50:  #f4f7f5;
  --gray-100: #dce8df;
  --gray-200: #b5cbbf;
  --gray-400: #7a9e8a;
  --gray-500: #7a8f80;    
  --gray-600: #3d5c4a;
  --gray-700: #2d3f35;
  --gray-800: #1a2e1e;
  --gray-900: #0d1a11;

  /* Semantic status */
  --color-success: #10b981;
  --color-danger:  #ef4444;
  --color-warning: #f59e0b;
  --color-info:    #3b82f6;
}

/* ── DARK THEME (default) ─────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-base:       var(--gray-900);   /* #0d1a11 */
  --bg-2:          #111f15;
  --bg-3:          #162212;
  --surface:       #1a2a1e;
  --surface-2:     #1e2e22;

  --border:        rgba(61,186,111,0.15);
  --border-strong: rgba(61,186,111,0.30);

  --accent:        var(--green-400);  /* #3dba6f */
  --accent-light:  #5ecc86;
  --accent-glow:   rgba(61,186,111,0.20);
  --accent-cta:    var(--green-600);  /* #1f8c4a */

  --text-primary:  #e8f2ec;
  --text-muted:    #7aaa86;
  --text-subtle:   #4a7a56;

  --shield-fill:   var(--gray-800);
  --shield-stroke: #00c853;
  --logo-navi:     #f0f4f2;  /*#0e1f3d*/
  --doc-fill:      var(--gray-800);
  --doc-fold:      #b5cbbf;
  --doc-lines:     var(--gray-50);   /* #3d5c4a */

  /* Feedback palette */
  --ok:         #10b981;
  --ok-bg:      rgba(16,185,129,.08);
  --ok-border:  rgba(16,185,129,.25);
  --err:        #ef4444;
  --err-bg:     rgba(239,68,68,.08);
  --err-border: rgba(239,68,68,.25);

  /* ── Template shorthands (aliases) ── */
  --bg:       var(--bg-base);
  --bg2:      var(--bg-2);
  --bg3:      var(--bg-3);
  --surface2: var(--surface-2);
  --border2:  var(--border-strong);
  --glow:     var(--accent-glow);
  --cta:      var(--accent-cta);
  --cta-h:    var(--accent-light);
  --text1:    var(--text-primary);
  --text2:    var(--text-muted);
  --text3:    var(--text-subtle);
  --doc-line: var(--doc-lines);
}

/* ── LIGHT THEME ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:       var(--gray-50);    /* #f4f7f5 */
  --bg-2:          #edf2ef;
  --bg-3:          #e6ede8;
  --surface:       #ffffff;
  --surface-2:     #f0f5f1;

  --border:        #c4d9c8;
  --border-strong: #9abda4;

  --accent:        var(--green-600);  /* #1f8c4a */
  --accent-light:  #27a358;
  --accent-glow:   rgba(31,140,74,0.15);
  --accent-cta:    var(--green-600);  /* #1f8c4a */

  --text-primary:  #1a2e1e;
  --text-muted:    #3d5c4a;
  --text-subtle:   #7a9e8a;

  --shield-fill:   var(--gray-100);;
  --shield-stroke: #00c853;
  --logo-navi:     #0e1f3d;
  --doc-fill:      #ffffff;
  --doc-fold:      #c4d9c8;
  --doc-lines:     var(--gray-600);

  /* Feedback palette */
  --ok:         #059669;
  --ok-bg:      rgba(5,150,105,.07);
  --ok-border:  rgba(5,150,105,.25);
  --err:        #dc2626;
  --err-bg:     rgba(220,38,38,.07);
  --err-border: rgba(220,38,38,.25);

  /* ── Template shorthands (aliases) ── */
  --bg:       var(--bg-base);
  --bg2:      var(--bg-2);
  --bg3:      var(--bg-3);
  --surface2: var(--surface-2);
  --border2:  var(--border-strong);
  --glow:     var(--accent-glow);
  --cta:      var(--accent-cta);
  --cta-h:    var(--accent-light);
  --text1:    var(--text-primary);
  --text2:    var(--text-muted);
  --text3:    var(--text-subtle);
  --doc-line: var(--doc-lines);
}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font:      var(--font-sans);   /* shorthand used in templates */

  /* Type scale — clamp(min, fluid, max). Steps ≈ 1.18 ratio so adjacent
     sizes are distinguishable without shouting; every size fluidly tracks the
     viewport between its min (mobile) and max (desktop). */
  --text-2xs:  clamp(0.625rem, 1.3vw, 0.6875rem); /* legal fine print, chip counts */
  --text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);    /* metadata, timestamps, badges */
  --text-sm:   clamp(0.80rem, 1.8vw, 0.875rem);   /* most UI labels, table cells */
  --text-base: clamp(0.90rem, 2.0vw, 1.00rem);    /* body, inputs, button label */
  --text-md:   clamp(0.95rem, 2.2vw, 1.0625rem);  /* lead paragraph, list items */
  --text-lg:   clamp(1.00rem, 2.5vw, 1.125rem);   /* secondary heading */
  --text-xl:   clamp(1.10rem, 3.0vw, 1.25rem);    /* tier name, modal title */
  --text-2xl:  clamp(1.25rem, 3.5vw, 1.50rem);    /* card identity */
  --text-3xl:  clamp(1.625rem, 4.0vw, 2.00rem);   /* page headings (.page-hdr h1) */
  --text-4xl:  clamp(2.00rem, 5.0vw, 2.50rem);    /* section titles */
  --text-5xl:  clamp(2.25rem, 6.0vw, 3.00rem);    /* landing sub-hero */
  --text-6xl:  clamp(2.50rem, 7.0vw, 3.75rem);    /* landing hero */

  /* Hero: one key number per page (plan price, billing total) */
  --text-hero: clamp(2.25rem, 5.0vw, 3.00rem);

  /* Font weights — a named ramp so weight choices are intentional, not ad-hoc.
     App UI tops out at bold (700); --fw-black is reserved for the landing hero. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line heights */
  --lh-tight: 1.2;    /* headings, hero numbers */
  --lh-snug:  1.4;    /* tier/plan names */
  --lh-body:  1.6;    /* paragraphs, form notes */

  /* Uppercase label tracking */
  --ls-caps:  0.07em;
  --ls-tight: -0.01em; /* large display headings — pulls letters together */
}

/* ── SPACING ──────────────────────────────────────────────── */
:root {
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.50rem;   /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1.00rem;   /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.50rem;   /* 24px */
  --sp-8:  2.00rem;   /* 32px */
  --sp-10: 2.50rem;   /* 40px */
  --sp-12: 3.00rem;   /* 48px */
  --sp-16: 4.00rem;   /* 64px */
  --sp-20: 5.00rem;   /* 80px */
  --sp-24: 6.00rem;   /* 96px */
}

/* ── SHAPE ────────────────────────────────────────────────── */
:root {
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;
}

/* ── SHADOWS ──────────────────────────────────────────────── */
:root {
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 32px var(--accent-glow);
}

/* ── TRANSITIONS ──────────────────────────────────────────── */
:root {
  --transition:      0.2s ease;
  --transition-slow: 0.4s ease;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
:root {
  --container-max: 1200px;
  --nav-height:    68px;
  --nav-h:         68px;   /* template shorthand */
}