/* Skala Garden — Design Tokens (iz design.md + spec.md sky-blue accent) */

:root {
  /* Brand */
  --navy:        #004687;
  --navy-deep:   #003266;
  --brand-blue:  #2980B9;
  --bright-blue: #007BFF;

  /* CTA / status */
  --green:       #009637;
  --green-dark:  #007A2E;
  --green-deep:  #005F23;
  --success:     #0D9748;
  --warn:        #F39C12;
  --error:       #DC3545;

  /* Neutrals */
  --charcoal:    #262626;
  --slate:       #6A6A6A;
  --med-gray:    #6C757D;
  --light-gray:  #808080;
  --pale-gray:   #F8F9FA;
  --smoke:       #ECECEC;
  --dark-char:   #343A40;

  /* Surface */
  --white:       #FFFFFF;
  --black:       #000000;

  /* Typography */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-h1:    50px;
  --fs-h2:    36px;
  --fs-h3:    28px;
  --fs-h4:    24px;
  --fs-h5:    20px;
  --fs-h6:    16px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-tiny:  12px;
  --fs-lead:  20px;

  /* Spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-21:  84px;
  --sp-24:  96px;

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --header-h: 72px;
  --header-h-scrolled: 64px;

  /* Elevation */
  --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.082);
  --shadow-md: 0 16px 40px rgba(112, 144, 176, 0.2);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 32px 64px rgba(0, 30, 60, 0.18);

  /* Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* Durations */
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 600ms;

  /* Radii — sharp industrial */
  --r-0: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;
}