/* Fakel design tokens, copied verbatim from fakel-design-guidelines resources/tokens
   (colors, typography, spacing, effects). Do not edit values here; update from the guideline. */
/* Fakel brand color palette — brandbook §2.1. The system is deliberately minimal:
   one saturated red, true black, pure white, and a neutral grey ramp derived for UI use.
   The three brand colors (red/black/white) are canonical; greys are a practical extension
   for interface work (borders, muted text, surfaces) and are NOT in the printed brandbook. */
:root{
  /* ---- Canonical brand colors ---- */
  --fakel-red:#E00034;      /* Pantone 185C · RAL 3020 · rgb(224,0,52) */
  --fakel-black:#000000;    /* RAL 9005 (device body) */
  --fakel-white:#FFFFFF;

  /* Red interaction shades (derived for hover/press states) */
  --fakel-red-hover:#C4002E;
  --fakel-red-press:#A80027;
  --fakel-red-tint:#FDE6EB;   /* pale red wash for backgrounds/badges */

  /* ---- Neutral ramp (UI extension, not in brandbook) ---- */
  --grey-950:#0A0A0B;
  --grey-900:#161618;
  --grey-800:#2A2A2E;
  --grey-700:#3E3E44;
  --grey-600:#5C5C64;
  --grey-500:#8A8A93;   /* "gray 50%" secondary caption color */
  --grey-400:#B4B4BC;
  --grey-300:#D6D6DB;
  --grey-200:#E7E7EB;
  --grey-100:#F2F2F4;
  --grey-50:#F8F8FA;

  /* ---- Semantic aliases ---- */
  --color-accent:var(--fakel-red);
  --color-accent-hover:var(--fakel-red-hover);
  --color-accent-press:var(--fakel-red-press);
  --color-accent-tint:var(--fakel-red-tint);

  --text-strong:var(--fakel-black);
  --text-body:var(--grey-900);
  --text-muted:var(--grey-500);      /* secondary captions, gray 50% */
  --text-inverse:var(--fakel-white);
  --text-accent:var(--fakel-red);

  --surface-page:var(--fakel-white);
  --surface-card:var(--fakel-white);
  --surface-subtle:var(--grey-50);
  --surface-muted:var(--grey-100);
  --surface-dark:var(--fakel-black);   /* device body / dark covers */

  --border-subtle:var(--grey-200);
  --border-default:var(--grey-300);
  --border-strong:var(--grey-600);

  /* Status — practical UI colors harmonized with the red accent */
  --color-success:#1F9D57;
  --color-warning:#E0A400;
  --color-danger:var(--fakel-red);
  --color-info:#2563C9;
}

/* Fakel typography — brandbook §4. Proxima Nova is the corporate typeface for print and web.
   PT Sans is the device/interface font (ports, indicators, on-device UI). Arial is the
   fallback for environments without the corporate font (e.g. PowerPoint). Type scale is
   derived from the brandbook usage example (§4.4): H1 30pt / H2 16pt / H3 10pt / body 10pt. */
:root{
  --font-brand:"Proxima Nova","Arial",-apple-system,"Segoe UI",sans-serif;
  --font-device:"PT Sans","Arial",sans-serif;   /* device labels, technical/interface UI */
  --font-fallback:"Arial",sans-serif;

  /* Weights available in Proxima Nova */
  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:900; /* @kind font */

  /* Type scale (rem, 16px base) — proportioned from the brandbook 30/16/10 relationship */
  --text-display:3.5rem;   /* cover / hero headlines */
  --text-h1:1.875rem;      /* 30pt H1 */
  --text-h2:1.5rem;
  --text-h3:1.125rem;      /* 16pt H2-ish */
  --text-lg:1.125rem;
  --text-base:1rem;
  --text-sm:0.875rem;
  --text-xs:0.75rem;       /* captions */

  --lh-tight:1.05; /* @kind font */         /* display / headlines */
  --lh-snug:1.2; /* @kind font */           /* headings */
  --lh-normal:1.5; /* @kind font */         /* body */

  --tracking-tight:-0.02em; /* @kind font */
  --tracking-normal:0; /* @kind font */
  --tracking-caps:0.08em; /* @kind font */  /* uppercase brand headlines (cover treatment) */
}

/* Fakel spacing & radius. Print grid is 6 columns (§5.1). For UI we use a compact scale.
   The brand aesthetic is sharp and technical — corners are minimal (small radii), never pill-soft. */
:root{
  --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;

  /* Corner radii — kept tight/architectural to match the hardware/technical brand */
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-full:999px;

  /* Layout */
  --container-max:1200px; /* @kind spacing */
  --grid-columns:6; /* @kind other */   /* brandbook modular grid */

  /* Red stripe (brandbook §5.3) — the signature decorative marker. Thickness ~ the bar of "К". */
  --stripe-thickness:6px; /* @kind spacing */
  --stripe-thickness-lg:10px; /* @kind spacing */
}

/* Fakel effects — shadows, transitions. The brand is flat and precise; shadows are used
   sparingly and softly for interface elevation only (not part of the print brandbook). */
:root{
  --shadow-sm:0 1px 2px rgba(10,10,11,0.08);
  --shadow-md:0 2px 8px rgba(10,10,11,0.10);
  --shadow-lg:0 8px 28px rgba(10,10,11,0.14);
  --shadow-focus:0 0 0 3px rgba(224,0,52,0.28);   /* red focus ring */

  --transition-fast:120ms cubic-bezier(0.2,0,0,1); /* @kind other */
  --transition-base:180ms cubic-bezier(0.2,0,0,1); /* @kind other */
}