/* ============================================================
   Dalibor Farny Design System - tokens
   Copied from the Claude Design project "Dalibor Farny Design System"
   (tokens/colors.css, tokens/typography.css, tokens/spacing.css) on 2026-10-01.
   Keep in sync with the design system; docs-specific styling lives in docs.css.
   Fonts are self-hosted (assets/fonts, OFL) instead of the design system's Google Fonts
   @import: no third-party requests and the CSP stays 'self'.
   ============================================================ */

/* ---- fonts (latin + latin-ext for Czech/German) ---- */
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../fonts/bebas-neue-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../fonts/bebas-neue-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(../fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(../fonts/hanken-grotesk-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap;
    src: url(../fonts/hanken-grotesk-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap;
    src: url(../fonts/hanken-grotesk-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(../fonts/inconsolata-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(../fonts/inconsolata-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens/colors.css ---- */
:root {
  /* —— Raw scale: warm ink (backgrounds & surfaces) —— */
  --black:    #000000;
  --ink-900:  #0C0C0D;   /* page background */
  --ink-850:  #111110;
  --ink-800:  #161513;
  --ink-700:  #1B1B1A;   /* card / surface */
  --ink-600:  #24221E;   /* raised surface */
  --ink-500:  #322F29;   /* hairline-on-dark, inputs */
  --ink-400:  #423E36;

  /* —— Raw scale: light neutral (text on dark) —— */
  --cream-50:  #F2F1EE;  /* primary text */
  --cream-100: #E2E1DD;
  --cream-200: #C0BFBA;
  --cream-300: #93928D;  /* secondary text */
  --cream-400: #6E6D69;  /* tertiary / disabled */
  --cream-500: #4C4B48;  /* faint */

  /* —— Raw scale: brass (the metal — logo, fittings, accents) —— */
  --brass-300: #D8B988;
  --brass-400: #C9A368;
  --brass-500: #B5904E;  /* primary brass */
  --brass-600: #9A7838;
  --brass-700: #6F5727;

  /* —— Raw scale: Nixie glow (a tube that is lit) —— */
  --glow-300:  #FFB07A;
  --glow-400:  #FF8A47;
  --glow-500:  #FF6A1F;  /* signature live-tube orange */
  --glow-600:  #E2540F;
  --glow-700:  #8F3408;

  /* —— Semantic status —— */
  --ok-500:    #7BA86C;
  --warn-500:  #D9A441;
  --danger-500:#D7553F;

  /* —— Paper (light surfaces) —— */
  --paper:        #F2F1EE;
  --paper-100:    #E8E7E3;
  --paper-200:    #DCDBD6;
  --paper-300:    #C4C3BD;
  --paper-ink:    #1B1B1A;
  --paper-ink-2:  #4C4B48;
  --paper-muted:  #6A6966;
  --paper-faint:  #93928D;

  /* —— Semantic aliases —— */
  --bg:              var(--ink-900);
  --bg-deep:         var(--black);
  --surface:         var(--ink-700);
  --surface-raised:  var(--ink-600);
  --surface-sunken:  var(--ink-850);
  --field:           var(--ink-500);

  --text:            var(--cream-50);
  --text-secondary:  var(--cream-300);
  --text-muted:      var(--cream-400);
  --text-faint:      var(--cream-500);
  --text-on-brass:   #1A150C;
  --text-on-glow:    #2A1404;

  --accent:          var(--brass-500);
  --accent-bright:   var(--brass-400);
  --accent-deep:     var(--brass-600);

  --glow:            var(--glow-500);
  --glow-soft:       var(--glow-400);

  --border:          rgba(242, 241, 238, 0.10);
  --border-strong:   rgba(242, 241, 238, 0.18);
  --border-brass:    rgba(181, 144, 78, 0.45);
  --border-glow:     rgba(255, 106, 31, 0.45);

  --focus-ring:      rgba(255, 106, 31, 0.55);
}

/* Light theme "paper" - for manuals, print, light-mode UI */
:root[data-theme="paper"], [data-theme="paper"], .theme-paper {
  --bg:              var(--paper);
  --bg-deep:         var(--paper-100);
  --surface:         #FFFFFF;
  --surface-raised:  #F8F8F6;
  --surface-sunken:  var(--paper-100);
  --field:           #FFFFFF;

  --text:            var(--paper-ink);
  --text-secondary:  var(--paper-ink-2);
  --text-muted:      var(--paper-muted);
  --text-faint:      var(--paper-faint);

  --accent:          var(--brass-600);
  --accent-bright:   var(--brass-500);
  --accent-deep:     var(--brass-700);

  --glow:            var(--glow-600);
  --glow-soft:       var(--glow-500);

  --border:          rgba(27, 27, 26, 0.12);
  --border-strong:   rgba(27, 27, 26, 0.22);
  --border-brass:    rgba(154, 120, 56, 0.55);
  --border-glow:     rgba(226, 84, 15, 0.50);

  --focus-ring:      rgba(226, 84, 15, 0.45);

  --shadow-1: 0 1px 2px rgba(27,27,26,0.10);
  --shadow-2: 0 4px 16px rgba(27,27,26,0.12);
  --shadow-3: 0 18px 48px rgba(27,27,26,0.16);
  --grad-vignette: radial-gradient(120% 100% at 50% 0%, rgba(226,84,15,0.05) 0%, transparent 55%);

  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}

/* ---- tokens/typography.css ---- */
:root {
  --font-display: 'Bebas Neue', 'Hanken Grotesk', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Inconsolata', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --display-2xl: 132px;
  --display-xl:  96px;
  --display-lg:  72px;
  --display-md:  54px;
  --display-sm:  40px;

  --text-3xl: 34px;
  --text-2xl: 28px;
  --text-xl:  22px;
  --text-lg:  18px;
  --text-md:  16px;
  --text-sm:  14px;
  --text-xs:  13px;

  --label-md: 14px;
  --label-sm: 12px;

  --lh-display: 0.92;
  --lh-tight:   1.12;
  --lh-snug:    1.35;
  --lh-body:    1.6;

  --ls-display:  0.01em;
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-label:    0.18em;
  --ls-label-sm: 0.14em;
  --ls-mono:     0.02em;
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-0:   0;
  --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;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-pill: 999px;

  --bw-hair: 1px;
  --bw:      1.5px;
  --bw-bold: 2px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-3: 0 18px 48px rgba(0,0,0,0.55);

  --glow-sm: 0 0 8px rgba(255,106,31,0.45);
  --glow-md: 0 0 18px rgba(255,106,31,0.45), 0 0 4px rgba(255,138,71,0.65);
  --glow-lg: 0 0 42px rgba(255,106,31,0.40), 0 0 14px rgba(255,138,71,0.55);

  --inset-soft: inset 0 1px 0 rgba(242,241,238,0.05);

  --grad-vignette: radial-gradient(120% 100% at 50% 0%, rgba(255,106,31,0.06) 0%, transparent 55%);
  --grad-brass:    linear-gradient(180deg, var(--brass-400) 0%, var(--brass-600) 100%);
  --grad-fade-up:  linear-gradient(0deg, var(--ink-900) 0%, transparent 100%);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-med:    240ms;
  --dur-slow:   420ms;

  --container:    1200px;
  --container-sm: 760px;
}