/* ============================================================
   Design Tokens — Tvorim Sovershenstvo
   Extracted from Tilda production site 2026-03-11
   ============================================================ */

:root {
  /* ── Colors: Primary ── */
  --tv-color-primary:        #005c6f;   /* Deep teal — hero bg, headings, table headers */
  --tv-color-primary-light:  #08a3b9;   /* Light teal — hover states, accents */
  --tv-color-accent:         #34aabb;   /* Turquoise — links, bullets, brand name, buttons */
  --tv-color-accent-hover:   #08a3b9;   /* Turquoise hover */

  /* ── Colors: Backgrounds ── */
  --tv-bg-hero:              #005c6f;   /* Hero sections */
  --tv-bg-section-light:     #f9f9f9;   /* Light gray section bg */
  --tv-bg-section-warm:      #e5e3df;   /* Warm gray (used in some sections) */
  --tv-bg-section-alt:       #f1f0f0;   /* Alternate light bg */
  --tv-bg-white:             #ffffff;
  --tv-bg-card:              #ffffff;
  --tv-bg-footer:            #005c6f;   /* Footer background */

  /* ── Colors: Text ── */
  --tv-text-primary:         #333333;   /* Body text */
  --tv-text-secondary:       #666666;   /* Excerpts, secondary text */
  --tv-text-muted:           #999999;   /* Dates, meta */
  --tv-text-light:           #aaaaaa;   /* Subtle dates */
  --tv-text-nav:             #6b6b6b;   /* Nav links: rgb(107,107,107) */
  --tv-text-dark:            #4e4c4c;   /* Schedule text: rgb(78,76,76) */
  --tv-text-on-dark:         #ffffff;   /* White text on teal bg */
  --tv-text-heading:         #005c6f;   /* Headings on white bg */

  /* ── Colors: Borders & Decorative ── */
  --tv-border-light:         #e8e8e8;
  --tv-border-divider:       #eeeeee;
  --tv-border-subtle:        #e0e0e0;

  /* ── Colors: Gradients ── */
  --tv-gradient-1:           linear-gradient(135deg, #34aabb 0%, #005c6f 100%);
  --tv-gradient-2:           linear-gradient(135deg, #08a3b9 0%, #005c6f 100%);
  --tv-gradient-3:           linear-gradient(135deg, #25a8ba 0%, #004a5a 100%);

  /* ── Typography: Font Families ── */
  --tv-font-primary:         'InterTight', Arial, sans-serif;  /* Main font for everything */
  --tv-font-display:         'InterTight', Arial, sans-serif;  /* Display/heading font (same as primary in Tilda) */
  --tv-font-body:            'InterTight', Arial, sans-serif;  /* Body text */
  --tv-font-accent:          'InterTight', Arial, sans-serif;  /* Unified: InterTight only */

  /* ── Typography: Heading Sizes ── */
  --tv-h1-size:              45px;
  --tv-h1-weight:            400;
  --tv-h1-line-height:       1.0;

  --tv-h2-size:              28px;
  --tv-h2-weight:            600;
  --tv-h2-line-height:       1.3;

  --tv-h3-size:              22px;
  --tv-h3-weight:            600;
  --tv-h3-line-height:       1.35;

  --tv-h4-size:              18px;
  --tv-h4-weight:            600;
  --tv-h4-line-height:       1.4;

  /* ── Typography: Body ── */
  --tv-body-size:            16px;
  --tv-body-weight:          400;
  --tv-body-line-height:     1.75;

  --tv-small-size:           14px;
  --tv-small-weight:         400;

  --tv-caption-size:         12px;
  --tv-caption-weight:       400;

  /* ── Typography: Nav ── */
  --tv-nav-size:             14px;
  --tv-nav-weight:           400;
  --tv-nav-color:            #6b6b6b;

  /* ── Typography: Button ── */
  --tv-btn-size:             14px;
  --tv-btn-weight:           500;
  --tv-btn-letter-spacing:   0.5px;

  /* ── Spacing ── */
  --tv-header-height:        93px;      /* Fixed header */
  --tv-header-height-full:   111px;     /* With padding */
  --tv-section-padding:      60px;      /* Vertical section padding */
  --tv-section-padding-lg:   80px;
  --tv-container-max:        1200px;    /* Max container width */
  --tv-container-narrow:     800px;     /* Narrow content (articles) */
  --tv-content-padding:      20px;      /* Horizontal padding */
  --tv-hero-height:          673px;     /* Hero section height desktop */
  --tv-hero-height-tablet:   603px;
  --tv-hero-height-mobile:   553px;

  /* ── Border Radius ── */
  --tv-radius-sm:            4px;
  --tv-radius-md:            8px;
  --tv-radius-lg:            16px;
  --tv-radius-xl:            20px;
  --tv-radius-pill:          25px;
  --tv-radius-round:         50%;

  /* ── Box Shadows ── */
  --tv-shadow-card:          0 2px 16px rgba(0,0,0,0.06);
  --tv-shadow-card-hover:    0 8px 32px rgba(0,0,0,0.12);
  --tv-shadow-soft:          0 2px 12px rgba(0,0,0,0.08);
  --tv-shadow-elevated:      0 5px 15px rgba(0,0,0,0.15);
  --tv-shadow-header:        0 0 7px rgba(0,0,0,0.2);
  --tv-shadow-modal:         0 24px 80px rgba(0,0,0,0.25);
  --tv-shadow-btn:           0 3px 10px rgba(0,0,0,0.15);

  /* ── Transitions ── */
  --tv-transition-fast:      0.2s ease;
  --tv-transition-normal:    0.3s ease;
  --tv-transition-slow:      0.5s ease;

  /* ── Z-Index Scale ── */
  --tv-z-header:             990;
  --tv-z-dropdown:           1000;
  --tv-z-modal:              1010;
  --tv-z-tooltip:            1020;

  /* ── Breakpoints (for reference, used in media queries) ── */
  /* Desktop: > 1199px */
  /* Tablet:  640px - 1199px */
  /* Mobile:  < 640px */
}