/* ============================================================
   Adri uvázáno — Design tokens
   Ported from the "Adri uvázáno — Design System" handoff bundle.
   Boho / vintage florist: turquoise primary (#1FB6A6) on warm
   cream neutrals, with earthy boho accents.
   ============================================================ */

:root {
  /* ---- Brand: turquoise (primary) ---- */
  --turquoise-50:  #E7F7F4;
  --turquoise-100: #C4ECE6;
  --turquoise-200: #9ADFD5;
  --turquoise-300: #5FC9BF;
  --turquoise-400: #38C0B0;
  --turquoise-500: #1FB6A6;  /* core brand */
  --turquoise-600: #138C80;
  --turquoise-700: #0E6F66;
  --turquoise-800: #0B564F;
  --turquoise-900: #08403A;

  /* ---- Warm neutrals (cream → ink) ---- */
  --cream-50:  #FBF7F0;
  --cream-100: #F6EFE2;
  --sand-200:  #EADFCB;
  --sand-300:  #DCCDB1;
  --clay-400:  #C3AE8E;
  --stone-500: #9C8A6E;
  --stone-600: #756650;
  --bark-700:  #54483A;
  --bark-800:  #3A3128;
  --ink-900:   #2A241C;   /* warm near-black */

  /* ---- Earthy boho accents ---- */
  --terracotta-300: #E0A98C;
  --terracotta-500: #C26B47;  /* terracotta */
  --terracotta-700: #97492C;

  --ochre-300: #EAC979;
  --ochre-500: #D29B3A;       /* mustard / ochre */
  --ochre-700: #9E6E1E;

  --rose-300: #ECC8C1;
  --rose-500: #D49C95;        /* dusty rose / blush */
  --rose-700: #A86A63;

  --sage-300: #C2CBAE;
  --sage-500: #8A9A72;        /* muted boho green */
  --sage-700: #5C6A48;

  /* ---- Semantic state colors (tuned warm) ---- */
  --success-soft: #DCEFD9;
  --success:      #5C8A4E;
  --success-ink:  #34532B;

  --warning-soft: #FBEBC9;
  --warning:      #C58A1E;
  --warning-ink:  #6E4C09;

  --danger-soft:  #F6DAD2;
  --danger:       #B5482F;
  --danger-ink:   #6E2818;

  --info-soft:    #D7EEEA;
  --info:         #138C80;
  --info-ink:     #0B4A44;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--cream-50);
  --surface-raised:  #FFFFFF;
  --surface-card:    #FFFFFF;
  --surface-sunken:  var(--cream-100);
  --surface-inverse: var(--ink-900);
  --surface-brand:   var(--turquoise-500);
  --surface-brand-soft: var(--turquoise-50);
  --surface-overlay: rgba(42, 36, 28, 0.55);

  --text-strong:   var(--ink-900);
  --text-body:     var(--bark-800);
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-on-brand: #FFFFFF;
  --text-on-dark:  var(--cream-50);
  --text-brand:    var(--turquoise-700);
  --text-link:     var(--turquoise-700);

  --border-hair:    var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--clay-400);
  --border-brand:   var(--turquoise-500);
  --border-inverse: rgba(251, 247, 240, 0.18);

  --ring-brand: rgba(31, 182, 166, 0.45);

  --wash-warm:  linear-gradient(160deg, var(--cream-50) 0%, var(--cream-100) 100%);
  --wash-brand: linear-gradient(160deg, var(--turquoise-600) 0%, var(--turquoise-800) 100%);

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-xl: clamp(3rem, 1.4rem + 6.5vw, 6.5rem);
  --fs-display-lg: clamp(2.4rem, 1.3rem + 4.4vw, 4.5rem);
  --fs-display-md: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  --fs-display-sm: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-eyebrow: 0.78rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.05;
  --lh-display: 1.12;
  --lh-snug:    1.3;
  --lh-body:    1.62;

  --ls-display: -0.01em;
  --ls-tight:   -0.005em;
  --ls-normal:  0;
  --ls-eyebrow: 0.22em;
  --ls-button:  0.04em;

  --text-hero:      var(--fw-regular) var(--fs-display-xl)/var(--lh-display) var(--font-display);
  --text-h1:        var(--fw-regular) var(--fs-display-lg)/var(--lh-display) var(--font-display);
  --text-h2:        var(--fw-regular) var(--fs-display-md)/var(--lh-display) var(--font-display);
  --text-h3:        var(--fw-medium)  var(--fs-display-sm)/var(--lh-snug)    var(--font-display);
  --text-lead:      var(--fw-regular) var(--fs-md)/var(--lh-body)            var(--font-body);
  --text-body-font: var(--fw-regular) var(--fs-base)/var(--lh-body)          var(--font-body);
  --text-small:     var(--fw-regular) var(--fs-sm)/var(--lh-snug)            var(--font-body);

  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Radii ---- */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;
  --radius-arch: 50% 50% 8px 8px / 60% 60% 8px 8px; /* top arch, flat base */

  /* ---- Warm-tinted shadows ---- */
  --shadow-xs: 0 1px 2px rgba(58, 49, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(58, 49, 40, 0.08);
  --shadow-md: 0 6px 18px rgba(58, 49, 40, 0.10);
  --shadow-lg: 0 16px 40px rgba(58, 49, 40, 0.14);
  --shadow-brand: 0 10px 28px rgba(14, 111, 102, 0.22);
  --shadow-inset: inset 0 1px 2px rgba(58, 49, 40, 0.10);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  --border-width: 1px;
  --border-width-thick: 1.5px;

  /* ---- Motion — gentle, organic ---- */
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ---- Z-index ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-toast: 1100;
}