/* ============================================
   frantisek.works — global design tokens
   Zkopíruj do: src/styles/global.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  /* --- Surfaces --- */
  --bg:        #F5F3EE;
  --surface:   #EAE6DC;
  --surface-2: #FFFFFF;
  --border:    #D8D4C8;

  /* --- Text --- */
  --text:   #1D364E;
  --muted:  #5A6A7A;

  /* --- Akcenty --- */
  --coral:      #F08070;  --coral-bg:  #FDECEA;  --coral-text: #7A2A1A;
  --gold:       #FAD04A;  --gold-bg:   #FEF8DC;  --gold-text:  #5A3E00;
  --mint:       #8ECFBE;  --mint-bg:   #E0F4EE;  --mint-text:  #1A5A48;
  --blue:       #A8C4E0;  --blue-bg:   #E4EEF8;  --blue-text:  #1A3E6A;

  /* --- Typografie --- */
  --font:           'DM Sans', sans-serif;
  --text-display:   clamp(2rem, 5vw, 3rem);
  --text-h2:        clamp(1.25rem, 3vw, 1.5rem);
  --text-h3:        1.1rem;
  --text-lg:        1.125rem;
  --text-md:        1rem;
  --text-sm:        0.875rem;
  --text-xs:        0.75rem;
  --text-2xs:       0.7rem;
  --weight-regular: 400;
  --weight-medium:  500;
  --lh:             1.7;
  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --tracking-eyebrow: 0.07em;

  /* --- Spacing --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* --- Radii --- */
  --r-sm:   6px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(29, 54, 78, 0.04);
  --shadow-md: 0 4px 16px rgba(29, 54, 78, 0.08);

  /* --- Layout & motion --- */
  --container: 1100px;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  0.15s;
  --dur-base:  0.25s;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; background: var(--bg); color: var(--text); }
body { font-family: var(--font); line-height: var(--lh); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { opacity: 0.7; }

/* Responsive container */
@media (max-width: 768px) {
  :root { --space-lg: 1.25rem; }
}
@media (max-width: 480px) {
  :root { --space-lg: 1rem; }
}