/* tokens.css – Design Tokens (CSS Custom Properties) */
:root {
  /* === Primary: Teal – Trust + Clarity === */
  --color-primary:        #087F8C;
  --color-primary-dark:   #075E68;
  --color-primary-light:  #D7F3F1;
  --color-on-primary:     #FFFFFF;

  /* === Secondary: Blue – Depth === */
  --color-secondary:      #2F5F8F;
  --color-secondary-dark: #23496D;
  --color-secondary-light:#DDEAF3;
  --color-on-secondary:   #FFFFFF;

  /* === Accent: Orange – CTAs, Energie === */
  --color-accent:         #C65F28;
  --color-accent-hover:   #A9491C;
  --color-accent-light:   #F5D7C4;
  --color-on-accent:      #FFFFFF;

  /* === Neutral Surfaces === */
  --color-bg:             #F6F3ED;
  --color-surface:        #FFFDF8;
  --color-surface-2:      #ECEFF1;

  /* === Text === */
  --color-text:           #18212F;
  --color-text-muted:     #52606F;
  --color-text-subtle:    #8A96A3;

  /* === Border === */
  --color-border:         #DDD7CC;
  --color-border-strong:  #C9C1B4;

  /* === Semantic === */
  --color-success:        #059669;
  --color-error:          #DC2626;
  --color-focus:          #087F8C;

  /* === Per-Section Accent Colors === */
  --color-n8n:            #FF6D00;
  --color-claude:         #B86B22;
  --color-antigravity:    #7C3AED;
  --color-comfyui:        #0891B2;
  --color-ollama:         #16A34A;
  --color-hosting:        #3C4654;
  --color-docker:         #0DB7ED;

  /* === Hero Gradient === */
  --gradient-hero: linear-gradient(135deg, #18212F 0%, #075E68 54%, #2F5F8F 100%);

  /* === Typography === */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;

  /* === Spacing (8pt grid) === */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* === Layout === */
  --container-max:     1200px;
  --container-narrow:  720px;
  --section-padding-y: clamp(3.5rem, 7vw, 6.5rem);
  --nav-height:        68px;

  /* === Border Radius === */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm:        0 1px 2px rgba(24,33,47,0.06);
  --shadow-md:        0 5px 16px rgba(24,33,47,0.07);
  --shadow-lg:        0 14px 34px rgba(24,33,47,0.10);
  --shadow-card:      0 8px 22px rgba(24,33,47,0.06), 0 0 0 1px rgba(24,33,47,0.05);
  --shadow-card-hover:0 14px 34px rgba(24,33,47,0.10), 0 0 0 1px rgba(8,127,140,0.14);
  --shadow-nav:       0 1px 18px rgba(24,33,47,0.08);

  /* === Transitions === */
  --transition-fast:   150ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow:   300ms ease-out;

  /* === Z-Index === */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-modal:    50;

  /* === Focus Ring === */
  --focus-ring: 0 0 0 3px rgba(8, 127, 140, 0.34);
}