/* =====================================================================
   ČAPUS — Design System Foundations
   colors_and_type.css

   Organizing principle: "The Register" (Rejstřík).
   A ruled, document-like system. Hairline rules + disciplined typographic
   hierarchy carry the design. Warm paper, institutional ink, one warm
   signal accent. No decoration for its own sake.

   Fonts are loaded from Google Fonts (see note in README — local TTFs
   were not available in this environment; flag for substitution).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@300;400;500;600;700&family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root {
  /* -------------------------------------------------------------------
     1. PRIMITIVE COLOR TOKENS
     ------------------------------------------------------------------- */

  /* Ink — institutional anchor (desaturated blue-black) */
  --ink-900: #0F1C24;
  --ink-800: #16242E;   /* primary brand ink */
  --ink-700: #1E333F;
  --ink-600: #2A4554;
  --ink-500: #3C5C6E;
  --ink-400: #5E7A8A;
  --ink-300: #8AA0AC;

  /* Brick — warm signal accent (the "alive / current" colour) */
  --brick-800: #7E2914;
  --brick-700: #93311A;
  --brick-600: #B23A20;   /* primary accent */
  --brick-500: #C2563B;
  --brick-400: #D27D67;
  --brick-100: #F2E0D9;   /* accent tint background */

  /* Paper & warm neutrals — the page is never cold white */
  --paper:        #F6F2EA;   /* page background */
  --paper-raised: #FCFAF5;   /* cards / raised surfaces */
  --paper-sunken: #EFEADF;   /* wells / sunken sections */
  --warm-100: #EAE4D7;
  --warm-200: #DED7C7;       /* subtle border */
  --warm-300: #CDC4B0;       /* default hairline border */
  --warm-400: #B4AA93;
  --warm-500: #8C846E;
  --warm-600: #6A6354;

  /* Pure-ish references */
  --white: #FFFFFF;
  --black: #0A1318;

  /* -------------------------------------------------------------------
     2. SEMANTIC COLOR TOKENS
     ------------------------------------------------------------------- */

  /* Surfaces */
  --bg:            var(--paper);
  --bg-raised:     var(--paper-raised);
  --bg-sunken:     var(--paper-sunken);
  --bg-inverse:    var(--ink-800);

  /* Foreground / text */
  --fg-1: #18242C;            /* primary text */
  --fg-2: #45555F;            /* secondary text */
  --fg-3: #76808A;            /* muted / meta */
  --fg-on-ink:    #EFEFE7;    /* text on ink surfaces */
  --fg-on-ink-2:  #A9B8C0;    /* secondary text on ink */
  --fg-on-brick:  #FBF1EC;    /* text on brick surfaces */

  /* Lines & borders */
  --border:        var(--warm-300);
  --border-strong: var(--warm-400);
  --border-faint:  var(--warm-200);
  --rule-ink:      var(--ink-800);   /* heavy authoritative rule */

  /* Brand roles */
  --primary:        var(--ink-800);
  --primary-hover:  var(--ink-700);
  --accent:         var(--brick-600);
  --accent-hover:   var(--brick-700);
  --link:           var(--brick-700);
  --link-hover:     var(--brick-800);
  --focus-ring:     var(--ink-500);

  /* Semantic states */
  --success:    #2E6B4F;
  --success-bg: #E4EEE7;
  --warning:    #9A6B12;
  --warning-bg: #F4E9CF;
  --danger:     #B23A20;
  --danger-bg:  #F2E0D9;
  --info:       var(--ink-600);
  --info-bg:    #E3EAEC;

  /* -------------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------------- */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — institutional, generous. Base 17px (root 16px). */
  --text-xs:   0.75rem;    /* 12px — eyebrow / labels */
  --text-sm:   0.875rem;   /* 14px — meta, captions */
  --text-base: 1.0625rem;  /* 17px — body */
  --text-md:   1.1875rem;  /* 19px — lead body */
  --text-lg:   1.5rem;     /* 24px — h4 / large */
  --text-xl:   2rem;       /* 32px — h3 */
  --text-2xl:  2.5rem;     /* 40px — h2 */
  --text-3xl:  3.25rem;    /* 52px — h1 */
  --text-display: clamp(3rem, 1.5rem + 4.5vw, 4.5rem); /* hero display */

  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* eyebrows / overlines */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* -------------------------------------------------------------------
     4. SPACING (4px base)
     ------------------------------------------------------------------- */
  --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:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* -------------------------------------------------------------------
     5. RADII — institutional = crisp. Square-ish, never pill-soft.
     ------------------------------------------------------------------- */
  --radius-0: 0px;
  --radius-1: 2px;       /* default — cards, inputs, buttons */
  --radius-2: 4px;
  --radius-3: 6px;       /* larger surfaces only */
  --radius-full: 999px;  /* reserved: avatars, status dots */

  /* -------------------------------------------------------------------
     6. ELEVATION — minimal. Borders define most surfaces.
     ------------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(15, 28, 36, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 28, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 28, 36, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* -------------------------------------------------------------------
     7. LAYOUT
     ------------------------------------------------------------------- */
  --container:      1180px;   /* main content max-width */
  --container-wide: 1320px;
  --container-text: 720px;    /* readable prose measure */
  --header-h: 76px;

  /* Motion — minimal, fast, no bounce */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 260ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Apply on top of a reset. These define the institutional voice.
   ===================================================================== */

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.ds-h1, h1.ds {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.ds-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-semi);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}

.ds-h2, h2.ds {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.ds-h3, h3.ds {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.ds-h4, h4.ds {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.ds-body, p.ds {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.ds-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.ds-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.ds-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ds-link:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}