/* ============================================================
   DESIGN TOKENS — torzsokarpad.hu
   Source of truth for all design values.
   All other stylesheets reference these variables.
   ============================================================ */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display-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: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display-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: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-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: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-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;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-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 {
  /* --- Colour --- */
  --color-bg:             #F5F3EF;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #EDEAE4;
  --color-text-primary:   #1A1A18;
  --color-text-secondary: #5A5750;
  --color-text-muted:     #9A968F;
  --color-accent:         #3D6B5E;
  --color-accent-hover:   #2E5248;
  --color-accent-subtle:  #EAF0EE;
  --color-border:         #D8D4CD;
  --color-border-focus:   #3D6B5E;
  --color-error:          #B94040;
  --color-error-subtle:   #F9ECEC;
  --color-white:          #FFFFFF;

  /* --- Typography --- */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.5rem;

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --max-width-content: 720px;
  --max-width-wide:    1100px;
  --max-width-site:    1280px;
  --gutter:            clamp(1rem, 5vw, 3rem);

  /* --- Radii --- */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(26, 26, 24, 0.08);
  --shadow-md: 0 4px 16px rgba(26, 26, 24, 0.10);
  --shadow-lg: 0 8px 32px rgba(26, 26, 24, 0.12);

  /* --- Motion --- */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-base:     cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Component-specific tokens --------------------------- */
  /* Footer background is always dark in both colour modes */
  --color-footer-bg:           #1A1A18;
  /* Header frosted-glass background when scrolled */
  --color-header-scrolled-bg:  rgba(245, 243, 239, 0.96);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* ============================================================
   DARK MODE — system preference override
   Warm-dark palette: inverted linen, deeper surfaces,
   accent lightened for contrast, denser shadows.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #1C1A17;
    --color-surface:        #242220;
    --color-surface-alt:    #201E1B;
    --color-text-primary:   #EDE9E3;
    --color-text-secondary: #A8A49D;
    --color-text-muted:     #6A6660;
    --color-accent:         #5A9082;
    --color-accent-hover:   #6AAF9E;
    --color-accent-subtle:  #1A2C28;
    --color-border:         #38352F;
    --color-border-focus:   #5A9082;
    --color-error:          #D46060;
    --color-error-subtle:   #2A1818;

    /* Denser shadows — dark-on-dark at low opacity is invisible */
    --shadow-sm: 0 1px 4px  rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.55);

    /* Frosted header uses dark bg */
    --color-header-scrolled-bg: rgba(28, 26, 23, 0.96);

    /* --color-footer-bg stays #1A1A18 — footer is always the darkest element */
    /* --color-white stays #FFFFFF — used for text on accent-coloured buttons  */
  }
}