/* Tiltshift Design Tokens */

/* HelveticaNeue Font Faces */
@font-face {
    font-family: 'HelveticaNeueLTPro-Bd';
    src: url('https://cdn.tiltshift.nl/assets/fonts/HelveticaNeueLTPro-Bd/font.woff2') format('woff2'),
         url('https://cdn.tiltshift.nl/assets/fonts/HelveticaNeueLTPro-Bd/font.woff') format('woff');
}

@font-face {
    font-family: 'HelveticaNeueRegular';
    src: url('https://cdn.tiltshift.nl/assets/fonts/HelveticaNeueRegular/helvetica-regular.woff2') format('woff2'),
         url('https://cdn.tiltshift.nl/assets/fonts/HelveticaNeueRegular/helvetica-regular.woff') format('woff');
}

/* AtkinsonHyperlegible Font Faces */
@font-face {
    font-family: "AtkinsonHyperlegible";
    src: url('https://cdn.tiltshift.nl/assets/fonts/AtkinsonHyperlegible/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
}
@font-face {
    font-family: "AtkinsonHyperlegible";
    src: url('https://cdn.tiltshift.nl/assets/fonts/AtkinsonHyperlegible/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2');
    font-weight: bold;
}
@font-face {
    font-family: "AtkinsonHyperlegible";
    src: url('https://cdn.tiltshift.nl/assets/fonts/AtkinsonHyperlegible/WOFF2/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2');
    font-style: italic;
}
@font-face {
    font-family: "AtkinsonHyperlegible";
    src: url('https://cdn.tiltshift.nl/assets/fonts/AtkinsonHyperlegible/WOFF2/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

:root {
  /* Colors */
  --ts-color-primary: #E64544;
  --ts-color-primary-dark: #1E59A6;
  --ts-color-primary-light: #ff7574;
  --ts-color-black: #1D1621;
  --ts-color-white: #ffffff;
  --ts-color-off-white: #F9F9F6;
  --ts-color-grey: #EFEFEF;
  --ts-color-grey-light: #e5e5e5;
  --ts-color-text: #1C1C1B;
  --ts-color-label-default: #f4b4b4;
  --ts-color-label-info: #b4b4f4;
  --ts-color-border-light: #e5e5e5;

  /* Spacing - Vereenvoudigd 4-niveau systeem */
  --ts-space-0: 0;        /* 0px - geen ruimte */
  --ts-space-xs: 0.5rem;  /* 8px - extra klein (was space-1) */
  --ts-space-1: 0.5rem;   /* 8px - klein */
  --ts-space-2: 1rem;     /* 16px - standaard */
  --ts-space-3: 2rem;     /* 32px - groot */
  --ts-space-4: 3rem;     /* 48px - extra groot */
  
  /* Legacy mapping voor backward compatibility */
  --ts-space-5: 3rem;     /* 48px - mapped naar space-4 */
  --ts-space-6: 4rem;     /* 64px - alleen voor speciale gevallen */
  --ts-space-7: 5rem;     /* 80px - deprecated */
  --ts-space-8: 6rem;     /* 96px - deprecated */

  /* Font sizes */
  --ts-text-xs: 0.9rem;    /* 14.4px */
  --ts-text-sm: 1.125rem;  /* 18px */
  --ts-text-md: 1.25rem;   /* 20px */
  --ts-text-lg: 1.375rem;  /* 22px */
  --ts-text-xl: 1.75rem;   /* 28px */
  --ts-text-2xl: 2.75rem;  /* 44px */

  /* Font weights */
  --ts-font-weight-normal: 500;
  --ts-font-weight-bold: 700;

  /* Font families */
  --ts-font-primary: 'AtkinsonHyperlegible', 'HelveticaNeueRegular', sans-serif;
  --ts-font-primary-bold: 'HelveticaNeueLTPro-Bd', 'AtkinsonHyperlegible', sans-serif;
  --ts-font-heading: 'HelveticaNeueLTPro-Bd', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  --ts-font-script: 'Courier New', Consolas, monospace;

  /* Line heights */
  --ts-leading-tight: 1.2;
  --ts-leading-normal: 1.5;
  --ts-leading-relaxed: 1.6;
  --ts-leading-loose: 1.8;

  /* Border radius */
  --ts-radius-sm: 0.2rem;
  --ts-radius-md: 0.4rem;
  --ts-radius-lg: 0.8rem;

  /* Shadows */
  --ts-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ts-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --ts-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Container widths */
  --ts-container-sm: 720px;
  --ts-container-md: 1024px;
  --ts-container-lg: 1024px;

  /* Navigation tokens */
  --ts-nav-height-mobile: 4rem;
  --ts-nav-height-desktop: 4.375rem; /* 70px */
  
  /* Component-specific tokens */
  --ts-sidebar-width: 15.625rem; /* 250px */
  --ts-border-width: 0.125rem; /* 2px */
  --ts-border-accent: 0.25rem; /* 4px */
  
  /* Logo sizes */
  --ts-logo-sm: 2.8125rem; /* 45px */
  --ts-logo-md: 3.75rem; /* 60px */
  --ts-logo-lg: 6.25rem; /* 100px */
  --ts-logo-xl: 10rem; /* 160px */
  
  /* Breakpoints */
  --ts-breakpoint-xs: 400px;
  --ts-breakpoint-sm: 768px;
  --ts-breakpoint-md: 1024px;
  --ts-breakpoint-lg: 1200px;

  /* =============================================================================
     THEME SYSTEM - Voor eenvoudige globale aanpassingen
     ============================================================================= */

  /* Intensiteit multipliers - voor "gedurfder", "subtieler" */
  --ts-intensity-subtle: 0.7;    /* 70% van origineel */
  --ts-intensity-normal: 1;      /* 100% normaal */
  --ts-intensity-bold: 1.3;      /* 130% gedurfder */
  --ts-intensity-daring: 1.6;    /* 160% zeer gedurfd */

  /* Dynamische spacing gebaseerd op intensiteit */
  --ts-spacing-multiplier: var(--ts-intensity-normal);
  --ts-scale-multiplier: var(--ts-intensity-normal);
  --ts-shadow-multiplier: var(--ts-intensity-normal);

  /* Theme-aware computed values */
  --ts-computed-space-1: calc(var(--ts-space-1) * var(--ts-spacing-multiplier));
  --ts-computed-space-2: calc(var(--ts-space-2) * var(--ts-spacing-multiplier));
  --ts-computed-space-3: calc(var(--ts-space-3) * var(--ts-spacing-multiplier));
  --ts-computed-space-4: calc(var(--ts-space-4) * var(--ts-spacing-multiplier));
  --ts-computed-space-5: calc(var(--ts-space-5) * var(--ts-spacing-multiplier));
  --ts-computed-space-6: calc(var(--ts-space-6) * var(--ts-spacing-multiplier));

  /* Dynamic logo sizes */
  --ts-computed-logo-sm: calc(var(--ts-logo-sm) * var(--ts-scale-multiplier));
  --ts-computed-logo-md: calc(var(--ts-logo-md) * var(--ts-scale-multiplier));
  --ts-computed-logo-lg: calc(var(--ts-logo-lg) * var(--ts-scale-multiplier));
  --ts-computed-logo-xl: calc(var(--ts-logo-xl) * var(--ts-scale-multiplier));

  /* Dynamic shadows */
  --ts-computed-shadow-sm: 0 calc(1px * var(--ts-shadow-multiplier)) calc(2px * var(--ts-shadow-multiplier)) 0 rgba(0, 0, 0, calc(0.05 * var(--ts-shadow-multiplier)));
  --ts-computed-shadow-md: 0 calc(4px * var(--ts-shadow-multiplier)) calc(6px * var(--ts-shadow-multiplier)) calc(-1px * var(--ts-shadow-multiplier)) rgba(0, 0, 0, calc(0.1 * var(--ts-shadow-multiplier)));
  --ts-computed-shadow-lg: 0 calc(10px * var(--ts-shadow-multiplier)) calc(15px * var(--ts-shadow-multiplier)) calc(-3px * var(--ts-shadow-multiplier)) rgba(0, 0, 0, calc(0.1 * var(--ts-shadow-multiplier)));
}