/* ============================================
   FITLOG – Design System Variables
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  /* ─── Principal Palette ─── */
  --color-sky:        #95CDE7;
  --color-navy:       #00416A;
  --color-dark:       #252525;
  --color-black:      #000000;
  --color-white:      #FFFFFF;
  --color-charcoal:   #434343;

  /* ─── Secondary Palette ─── */
  --color-silver:     #B5B5B5;
  --color-blue:       #0071B8;
  --color-ice:        #B2D0E7;

  /* ─── Semantic ─── */
  --color-bg:         #F4F8FC;
  --color-surface:    #FFFFFF;
  --color-border:     #DCE9F3;
  --color-danger:     #D64040;
  --color-darkRed:    #5a2121;
  --color-success:    #2DAA6A;
  --color-warning:    #E8A020;

  /* ─── Background ─── */
  --bg-light: #d8d8d8;
  --bg-warning:       #e89f2036;
  --bg-ban: #411c1c50;
  --border: #252525;

  /* ─── Typography ─── */
  --font-heading:     'Montserrat', sans-serif;
  --font-body:        'Roboto', sans-serif;

  --text-h1:          2.5rem;
  --text-h2:          1.75rem;
  --text-h3:          1.35rem;
  --text-body:        1rem;
  --text-btn:         0.9rem;
  --text-small:       0.8rem;

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

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

  /* ─── Radius ─── */
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        32px;
  --radius-full:      9999px;

  /* ─── Shadows ─── */
  --shadow-sm:        0 2px 8px rgba(0,65,106,0.08);
  --shadow-md:        0 4px 20px rgba(0,65,106,0.12);
  --shadow-lg:        0 8px 40px rgba(0,65,106,0.18);
  --shadow-card:      0 2px 16px rgba(0,113,184,0.10);

  /* ─── Transitions ─── */
  --transition-fast:  0.15s ease;
  --transition-mid:   0.28s cubic-bezier(0.4,0,0.2,1);
  --transition-slow:  0.45s cubic-bezier(0.4,0,0.2,1);

  /* ─── Layout ─── */
  --nav-height:       64px;
  --mobile-nav-h:     64px;
  --max-content:      480px;
  --max-wide:         1100px;
}