/* ==========================================================================
   THEME: DRGA — Truhlářství Tomáš Drga
   ==========================================================================
   First client theme. Sole-trader carpenter, handmade solid-wood
   furniture. Personality: warm, honest, unhurried craft.

   Levers pulled (vs. neutral):
   - warm oak palette, sage-green secondary
   - Gelasio for headings, self-hosted — chosen as the closest free match
     to Georgia (the approved look on Windows Chrome), which is a Microsoft
     system face and cannot be shipped. At weight 700 its headline width
     matches Georgia at 600 to the pixel, which is why the heading weight
     moved to 700 here.
   - slightly squarer radii (handcrafted, not bubbly)
   - warm-tinted shadows
   - slower, calmer reveals (900ms, longer stagger)
   ========================================================================== */

/* The font is part of the theme, not the base: a different client mutation
   ships a different face, and nothing in the shared stylesheets names one.
   Self-hosted so every browser on every OS renders the same typeface —
   the whole reason Gelasio is here is that a stack resolved to Georgia on
   Windows and Iowan Old Style on a Mac, two different letters.

   One variable file per subset covers the whole 400–700 range (Google
   serves the same woff2 for both weights), so the weight is a range, not
   two files. latin-ext carries the Czech diacritics; vietnamese and the
   italics are omitted deliberately — no template uses them, and an unused
   subset is bytes a visitor downloads for nothing. */
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/gelasio-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: "Gelasio";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/gelasio-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;
}

/* Body sans, self-hosted for the same reason as the heading: the old
   stack drew Segoe UI on Windows and Avenir Next on a Mac, neither free.
   Nunito Sans is a warm humanist face that sits under Gelasio without
   competing with it. One variable file per subset covers 400–700, so the
   body (400), bold and nav (600) come from the same download. Cyrillic
   and vietnamese subsets are dropped — no template needs them. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/nunito-sans-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: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/nunito-sans-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;
}

:root {
  /* 1. COLOR — oak */
  --color-primary-50:  #f9f4ec;
  --color-primary-100: #f1e6d2;
  --color-primary-200: #e3cda6;
  --color-primary-300: #d2af78;
  --color-primary-400: #bd8d4e;
  --color-primary-500: #a67436;
  --color-primary-600: #8e5f2c;
  --color-primary-700: #734c24;
  --color-primary-800: #5a3b1d;
  --color-primary-900: #422b16;

  --color-primary: var(--color-primary-600);
  /* Second brand colour. Many brands are two-colour (yellow + blue is a
     classic trade pairing) and a single accent cannot carry them.

     Primary dominates — buttons, links, the things that act. Secondary
     accents — marks, numbers, decorative emphasis. If the brand has only
     one colour, set this to a primary shade: everything still reads as
     intentional, nothing needs a special case. */
  --color-secondary: #5f6e4c;
  /* Readable variant of the above — see theme-template.css. The sage
     measures 5.32 on this theme's surface and 4.80 on the alt panel, which
     is why the statistics read here and why nobody noticed the token was
     missing until a yellow brand arrived. Same value, so nothing on an
     approved page moves. */
  --color-secondary-strong: var(--color-secondary);

  --color-surface:         #fdfbf7;
  --color-surface-alt:     #f5efe3;
  --color-surface-inverse: #2c2317;

  --color-text:            #2b2318;
  --color-text-muted:      #70614d;
  --color-text-on-primary: #ffffff;
  --color-text-on-inverse: #f3ecdf;

  --color-border: #e5dbc7;

  /* Feedback states. Four tokens each, which is what a notice actually
     needs: a tinted background, a line/icon colour, readable text on that
     tint, and text on the solid colour. Ten-step ramps were considered and
     rejected — steps nothing renders are steps a designer still has to
     fill in for every single client. */
  --color-success:        #4a7c46;
  --color-success-soft:   #eaf2e8;
  --color-success-strong: #2f5a2c;
  --color-success-on:     #ffffff;

  --color-warning:        #9c6710;
  --color-warning-soft:   #f9efdb;
  --color-warning-strong: #6f4a08;
  --color-warning-on:     #ffffff;

  --color-error:          #b23d2e;
  --color-error-soft:     #f8e8e5;
  --color-error-strong:   #78271d;
  --color-error-on:       #ffffff;

  --color-info:           #4a6f80;
  --color-info-soft:      #e9f0f3;
  --color-info-strong:    #2e4a56;
  --color-info-on:        #ffffff;

  /* 2. TYPOGRAPHY — serif display over a quiet sans body */
  /* Georgia stays last as the fallback: it is the face Gelasio was chosen
     to match, so on the rare machine where the woff2 fails to load the
     page degrades to the closest thing rather than to something alien. */
  --font-heading: "Gelasio", Georgia, serif;
  /* Nunito Sans, self-hosted; the platform sans stay as the fallback so a
     failed load degrades to the closest thing rather than to something alien. */
  --font-body:    "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  /* Buttons take the display serif — a small brand moment on every CTA,
     and the thing that lifts the template out of plain-system-font. Nav
     links are not buttons, so they stay in the body sans. */
  --font-button:  var(--font-heading);

  --font-weight-heading: 700;   /* Gelasio 700 = Georgia 600 in width, measured */
  --font-weight-body:    400;
  --font-weight-bold:    600;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.25rem + 1.4vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --text-4xl:  clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
  /* Hero only. A hero headline is not "a big h1", it is the one piece of
     type that has to carry the whole first impression — the size that
     tells a visitor what kind of workshop this is before they read a
     word. Kept as its own step so nothing else can drift into it. */
  --text-5xl:  clamp(2.75rem, 1.75rem + 4.4vw, 5rem);

  --leading-tight:   1.2;
  --leading-normal:  1.65;
  --leading-display: 1.08;      /* serif needs a touch more air */

  --tracking-tight:   -0.01em;  /* serifs bring their own tightness */
  --tracking-display: -0.015em;

  /* 3. SHAPE — crafted, slightly squarer */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;
  --radius-panel: 32px;   /* inset section slabs */

  --border-width: 1px;

  /* 4. SPACE & DENSITY — generous, unhurried */
  --space-unit:    0.25rem;
  /* The block rhythm has to fall as fast as the side margins do. The old
     curve hit its 9rem ceiling at 1370px, but the space beside a block
     comes from whatever is left over outside the 75rem container — and
     that is gone by about 1300px. So between roughly 1250 and 1600 a
     block had its full vertical rhythm and almost no horizontal one,
     which reads as a page that is only padded in one direction. The
     ceiling now arrives near 1870px, where there is width to justify it. */
  --section-space: clamp(4rem, 2rem + 6vw, 9rem);
  --container-max: 74rem;

  /* 5. SHADOWS — warm-tinted, felt not seen */
  --shadow-sm: 0 1px 2px rgb(66 43 22 / 0.06);
  --shadow-md: 0 2px 4px rgb(66 43 22 / 0.05), 0 8px 24px rgb(66 43 22 / 0.07);
  --shadow-lg: 0 4px 12px rgb(66 43 22 / 0.05), 0 24px 56px rgb(66 43 22 / 0.11);

  /* 6. MOTION — calm hands */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --motion-easing:  var(--ease-out-expo);

  --motion-duration:      220ms;
  --motion-duration-slow: 450ms;

  --reveal-duration:       900ms;
  --reveal-duration-slow: 1100ms;
  --reveal-distance:        24px;
  --reveal-stagger:        110ms;
  --reveal-stagger-group:  110ms;
  --reveal-stagger-line:   140ms;
}