/* ==========================================================================
   Stavitelství Řehoř — Design tokens
   Source: Claude Design direction "Domů" + web-designer token spec.
   Every mockup imports this file and uses these variables only —
   no raw hex, px font sizes, or one-off spacing in template bodies.
   ========================================================================== */

:root {
  /* ---- Color · brand ---- */
  --color-brand:        #A81C37;   /* crimson — from logo */
  --color-brand-hover:  #8E162E;
  --color-brand-tint:   #F7E4E8;   /* pale crimson — icon medallions / soft fills */
  --color-accent:       #3B5567;   /* slate — infrastructure/water accent */

  /* ---- Color · ink & surface ---- */
  --color-ink:          #121417;   /* near-black — headings, dark bands */
  --color-ink-deep:     #0E1013;   /* footer / deepest surface */
  --color-surface:      #FFFFFF;
  --color-band:         #F5F5F4;   /* light section band */

  /* ---- Color · text ---- */
  --color-text:         #121417;
  --color-text-muted:   #57534E;   /* body on light */
  --color-text-subtle:  #78716C;   /* meta / captions */

  /* ---- Color · lines ---- */
  --color-border:        #E7E5E4;
  --color-border-strong: #D6D3D1;

  /* ---- Color · on dark surfaces ---- */
  --on-dark:      #FFFFFF;
  --on-dark-82:   rgba(255,255,255,.82);
  --on-dark-72:   rgba(255,255,255,.72);
  --on-dark-60:   rgba(255,255,255,.60);
  --on-dark-55:   rgba(255,255,255,.55);
  --on-dark-45:   rgba(255,255,255,.45);
  --on-dark-16:   rgba(255,255,255,.16);
  --on-dark-12:   rgba(255,255,255,.12);
  --on-dark-10:   rgba(255,255,255,.10);

  /* ---- Color · image placeholders (mockups only) ---- */
  --ph-bg:       #E4E1DE;
  --ph-bg-alt:   #ECEAE8;
  --ph-bg-dark:  #23272B;
  --ph-line:     rgba(17,17,17,.05);

  /* ---- Color · state / semantic ---- */
  --color-focus: #3B5567;
  --color-live:  #A81C37;   /* "právě stavíme" status dot */

  /* ---- Typography · families ---- */
  --font-head: 'Barlow Condensed', system-ui, sans-serif;   /* headlines */
  --font-body: 'Barlow', system-ui, sans-serif;             /* body */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;    /* labels / meta */

  /* ---- Typography · weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Typography · fluid size scale ---- */
  --fs-display: clamp(2.875rem, 6.6vw, 6.5rem);      /* 46 → 104  hero h1 */
  --fs-h2-xl:   clamp(2.375rem, 4.4vw, 3.875rem);    /* 38 → 62   contact */
  --fs-h2:      clamp(2.125rem, 4vw, 3.5rem);        /* 34 → 56   section titles */
  --fs-h2-sm:   clamp(1.875rem, 3vw, 2.75rem);       /* 30 → 44   intro band */
  --fs-h3-lg:   clamp(2rem, 3.4vw, 2.875rem);        /* 32 → 46   teaser */
  --fs-stat:    clamp(3rem, 5vw, 4.75rem);           /* 48 → 76   stat numbers */
  --fs-h3:      1.6875rem;                            /* 27  card / project title */
  --fs-h4:      1.25rem;                              /* 20 */
  --fs-body-lg: clamp(1.0625rem, 1.5vw, 1.3125rem);  /* 17 → 21   lead */
  --fs-body:    1.0625rem;                            /* 17  standard body */
  --fs-base:    1rem;                                 /* 16 */
  --fs-sm:      0.96875rem;                           /* 15.5 */
  --fs-nav:     0.90625rem;                           /* 14.5  nav links */
  --fs-btn:     0.84375rem;                           /* 13.5  buttons */
  --fs-label:   0.78125rem;                           /* 12.5  mono label */
  --fs-label-sm:0.71875rem;                           /* 11.5  mono meta */
  --fs-label-xs:0.65625rem;                           /* 10.5  tags */

  /* ---- Typography · line-height ---- */
  --lh-hero:    0.95;
  --lh-heading: 1.05;
  --lh-title:   1.0;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --lh-relaxed: 1.7;

  /* ---- Typography · letter-spacing ---- */
  --ls-tight:      -0.005em;
  --ls-mono:        0.07em;
  --ls-label:       0.14em;
  --ls-label-wide:  0.16em;
  --ls-nav:         0.01em;

  /* ---- Spacing · 8-based scale ---- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  3.5rem;    /* 56 */
  --space-10: 4rem;      /* 64 */
  --space-12: 5rem;      /* 80 */
  --space-14: 6.5rem;    /* 104  section rhythm */
  --space-16: 8rem;      /* 128 */

  /* ---- Layout ---- */
  --container-max: 1360px;
  --gutter:        var(--space-7);   /* 40 */
  --header-height: 76px;
  --section-py:    var(--space-14);  /* 104 */

  /* ---- Radius (sharp system) ---- */
  --radius:      0;
  --radius-full: 9999px;

  /* ---- Shadows (minimal — borders over shadows) ---- */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.10);
  --shadow-header: 0 6px 24px rgba(0,0,0,.06);

  /* ---- Motion ---- */
  --ease:        ease;
  --dur-fast:    .2s;
  --dur:         .25s;
  --dur-slow:    .35s;
}