/* ============================================================
   Barebase Design System — Colors & Type
   ============================================================
   Premium toe spacers · Warm minimal · Dieter Rams-inspired.
   60% Warm White · 30% Charcoal · 10% Sage.
   ============================================================ */

@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/themes/barebase/assets/fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('/wp-content/themes/barebase/assets/fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/themes/barebase/assets/fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('/wp-content/themes/barebase/assets/fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     COLORS — Base palette
     ------------------------------------------------------------ */

  /* Neutralen */
  --bb-snow:        #FFFFFF;
  --bb-warm-white:  #FAF8F5;  /* Primary background — 60% */
  --bb-sand:        #F0EBE3;  /* Secondary surface */
  --bb-stone:       #D4CEC6;  /* Borders & dividers */
  --bb-warm-grey:   #9E9690;  /* Placeholder / secondary labels */
  --bb-charcoal:    #2C2C2C;  /* Primary text — 30% */
  --bb-deep-black:  #1A1A1A;  /* Headings, logo, strong emphasis */

  /* Merkaccenten (sparingly) */
  --bb-sage:        #8B9E7C;  /* Accent — 10% — CTAs, badges, links */
  --bb-terracotta:  #C67B5C;  /* Secondary accent, hover, badges */
  --bb-warm-sand:   #D4B896;  /* Comfort accent surfaces */
  --bb-forest:      #4A6741;  /* Sage CTA hover, depth */

  /* Translucent variants (used in light overlays) */
  --bb-sage-tint:   rgba(139, 158, 124, 0.10);
  --bb-sage-tint-20:rgba(139, 158, 124, 0.20);
  --bb-terracotta-tint: rgba(198, 123, 92, 0.10);
  --bb-overlay-dark: rgba(44, 44, 44, 0.55);

  /* Functioneel */
  --bb-success:     #6B9E5C;
  --bb-warning:     #D4A04A;
  --bb-error:       #C45B4A;
  --bb-info:        #5B8EC4;

  /* ------------------------------------------------------------
     COLORS — Semantic tokens (use these in components)
     ------------------------------------------------------------ */
  --bb-bg:               var(--bb-warm-white);
  --bb-bg-elevated:      var(--bb-snow);
  --bb-bg-subtle:        var(--bb-sand);
  --bb-bg-inverse:       var(--bb-charcoal);

  --bb-fg:               var(--bb-charcoal);      /* primary text */
  --bb-fg-strong:        var(--bb-deep-black);    /* headings */
  --bb-fg-muted:         var(--bb-warm-grey);     /* secondary text */
  --bb-fg-inverse:       var(--bb-warm-white);    /* text on dark */

  --bb-border:           var(--bb-stone);
  --bb-border-strong:    var(--bb-charcoal);
  --bb-divider:          var(--bb-stone);

  --bb-accent:           var(--bb-sage);
  --bb-accent-hover:     var(--bb-forest);
  --bb-accent-fg:        var(--bb-snow);
  --bb-accent-secondary: var(--bb-terracotta);

  --bb-link:             var(--bb-forest);
  --bb-link-hover:       var(--bb-sage);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --bb-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bb-font-display: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Modular scale — Major Third (1.250) */
  --bb-text-h1:        48px;  /* Hero / page title */
  --bb-text-h2:        36px;  /* Section title */
  --bb-text-h3:        28px;  /* Sub-section */
  --bb-text-h4:        22px;  /* Card title */
  --bb-text-body-lg:   18px;
  --bb-text-body:      16px;
  --bb-text-body-sm:   14px;
  --bb-text-caption:   12px;
  --bb-text-label:     11px;
  --bb-text-button:    16px;

  /* Mobile overrides */
  --bb-text-h1-mobile: 32px;
  --bb-text-h2-mobile: 26px;
  --bb-text-h3-mobile: 22px;
  --bb-text-h4-mobile: 18px;

  /* Weights */
  --bb-weight-regular: 400;
  --bb-weight-medium:  500;
  --bb-weight-semibold:600;
  --bb-weight-bold:    700;

  /* Letter spacing */
  --bb-tracking-tight: -0.02em;
  --bb-tracking-tight-sm: -0.01em;
  --bb-tracking-normal: 0;
  --bb-tracking-caption: 0.05em;
  --bb-tracking-label: 0.08em;
  --bb-tracking-button: 0.02em;

  /* Line-heights */
  --bb-leading-display: 1.1;
  --bb-leading-h2:      1.2;
  --bb-leading-h3:      1.3;
  --bb-leading-body:    1.6;
  --bb-leading-tight:   1.4;
  --bb-leading-button:  1;

  /* ------------------------------------------------------------
     SPACING — 8px grid
     ------------------------------------------------------------ */
  --bb-space-2xs: 4px;
  --bb-space-xs:  8px;
  --bb-space-sm:  16px;
  --bb-space-md:  24px;
  --bb-space-lg:  32px;
  --bb-space-xl:  48px;
  --bb-space-2xl: 64px;
  --bb-space-3xl: 96px;
  --bb-space-4xl: 128px;

  /* ------------------------------------------------------------
     RADII — Never 0, never full round
     ------------------------------------------------------------ */
  --bb-radius-input:  4px;
  --bb-radius-button: 6px;
  --bb-radius-card:   8px;
  --bb-radius-lg:     12px;
  --bb-radius-pill:   9999px; /* badges & pills only */

  /* ------------------------------------------------------------
     ELEVATION — Subtle, never heavy
     ------------------------------------------------------------ */
  --bb-shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.04);
  --bb-shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06);
  --bb-shadow-md: 0 2px 8px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
  --bb-shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.04);
  --bb-shadow-nav: 0 1px 8px rgba(44, 44, 44, 0.08);

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --bb-content-max:   1560px;
  --bb-text-max:      720px;
  --bb-gutter-desktop:24px;
  --bb-gutter-tablet: 20px;
  --bb-gutter-mobile: 16px;
  --bb-pad-desktop:   80px;
  --bb-pad-tablet:    40px;
  --bb-pad-mobile:    16px;

  /* ------------------------------------------------------------
     MOTION — Calm, never bouncy
     ------------------------------------------------------------ */
  --bb-duration-fast:   150ms;
  --bb-duration-base:   200ms;
  --bb-duration-slow:   320ms;
  --bb-duration-reveal: 640ms;  /* entrance & scroll-reveal — long, unhurried */
  --bb-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --bb-easing-emphasis: cubic-bezier(0.2, 0.0, 0.0, 1);
  --bb-easing-out:      cubic-bezier(0.22, 1, 0.36, 1);  /* calm decelerate, no overshoot */
}

/* ============================================================
   ELEMENT DEFAULTS — Apply across the system
   ============================================================ */

body {
  font-family: var(--bb-font-sans);
  font-size: var(--bb-text-body);
  line-height: var(--bb-leading-body);
  color: var(--bb-fg);
  background: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .bb-h1 {
  font-size: var(--bb-text-h1);
  font-weight: var(--bb-weight-bold);
  letter-spacing: var(--bb-tracking-tight);
  line-height: var(--bb-leading-display);
  color: var(--bb-fg-strong);
}
h2, .bb-h2 {
  font-size: var(--bb-text-h2);
  font-weight: var(--bb-weight-bold);
  letter-spacing: var(--bb-tracking-tight-sm);
  line-height: var(--bb-leading-h2);
  color: var(--bb-fg-strong);
}
h3, .bb-h3 {
  font-size: var(--bb-text-h3);
  font-weight: var(--bb-weight-bold);
  line-height: var(--bb-leading-h3);
  color: var(--bb-fg-strong);
}
h4, .bb-h4 {
  font-size: var(--bb-text-h4);
  font-weight: var(--bb-weight-medium);
  line-height: var(--bb-leading-h3);
  color: var(--bb-fg-strong);
}

p, .bb-body { font-size: var(--bb-text-body); line-height: var(--bb-leading-body); }
.bb-body-lg { font-size: var(--bb-text-body-lg); line-height: var(--bb-leading-body); }
.bb-body-sm { font-size: var(--bb-text-body-sm); line-height: 1.5; }

.bb-caption {
  font-size: var(--bb-text-caption);
  font-weight: var(--bb-weight-medium);
  letter-spacing: var(--bb-tracking-caption);
  line-height: var(--bb-leading-tight);
}
.bb-label {
  font-size: var(--bb-text-label);
  font-weight: var(--bb-weight-medium);
  letter-spacing: var(--bb-tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bb-accent);
}

.bb-muted { color: var(--bb-fg-muted); }
.bb-strong { color: var(--bb-fg-strong); font-weight: var(--bb-weight-semibold); }

a {
  color: var(--bb-link);
  text-decoration: none;
  transition: color var(--bb-duration-base) var(--bb-easing-standard);
}
a:hover { color: var(--bb-link-hover); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
  h1, .bb-h1 { font-size: var(--bb-text-h1-mobile); }
  h2, .bb-h2 { font-size: var(--bb-text-h2-mobile); }
  h3, .bb-h3 { font-size: var(--bb-text-h3-mobile); }
  h4, .bb-h4 { font-size: var(--bb-text-h4-mobile); }
}