/*
 * Studio DT — design tokens (canonical source of truth).
 * This is the ONLY file allowed to contain hardcoded hex / px font sizes.
 */

/* Brand typeface — U8Web (self-hosted, same files as the landing page). */
@font-face {
  font-family: "U8Web";
  src: url("../fonts/U8Web-Regular.woff2") format("woff2"),
       url("../fonts/U8Web-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "U8Web";
  src: url("../fonts/U8Web-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "U8Web";
  src: url("../fonts/U8Web-Black.woff2") format("woff2"),
       url("../fonts/U8Web-Black.woff")  format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === COLOR — primitives === */
  --palette-green-500: #30B657;
  --palette-orange-500: #EB8900;
  --palette-blue-500: #005CA1;
  --palette-lightblue-500: #9CCFE2;
  --palette-red-500: #FF4955;
  --palette-yellow-500: #EFBA1B;
  --palette-sand-50: #F3F3F3;
  --palette-ink-900: #000000;
  --palette-ink-500: #6B6B6B;
  --palette-ink-300: #A8A8A8;        /* input placeholders */
  --palette-white: #FFFFFF;

  /* === COLOR — semantic === */
  --color-brand-primary: var(--palette-green-500);
  --color-surface-default: var(--palette-sand-50);
  --color-surface-inverse: var(--palette-green-500);
  --color-text-default: var(--palette-ink-900);
  --color-text-muted: var(--palette-ink-500);
  --color-text-on-brand: var(--palette-ink-900);
  --color-text-on-badge: var(--palette-ink-900);
  --color-border-default: var(--palette-ink-900);
  --color-filter-selected: var(--palette-yellow-500); /* filter pills + active-filter chips */

  /* === TYPOGRAPHY === */
  --font-family-sans: "U8Web", system-ui, sans-serif;
  --font-size-display: 4.4375rem;       /* hero title */
  --font-size-page-title: 2.25rem;
  --font-size-section-title: 1.5625rem;
  --font-size-subhead: 1.25rem;
  --font-size-tab: 1.15rem;             /* project-table tab labels */
  --font-size-ui: 0.9375rem;            /* nav and UI controls */
  --font-size-body: 1rem;
  --font-size-caption: 0.875rem;
  --font-size-footnote: 0.875rem;
  /* Hero tagline (top hero-text + bottom hero-image-text logo card share this exact ramp). */
  --font-size-hero-tagline: clamp(1.15rem, 2.4vw, calc(var(--font-size-display) * 0.6));
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 900;
  --line-height-tight: 1.1;
  --line-height-default: 1.5;
  --letter-spacing-default: 0;
  --letter-spacing-wide: 0.05em;

  /* === SPACING === */
  --space-3xs: 0.25rem;   /* 4px  */
  --space-2xs: 0.5rem;    /* 8px  */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.25rem;    /* 20px — Vlad's dominant gutter (design ~24-26) */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 2.5rem;    /* 40px — Vlad's medium (design ~46-52) */
  --space-3xl: 3rem;      /* 48px */
  --space-4xl: 4rem;      /* 64px */
  --space-5xl: 9rem;      /* 144px — hero framing (logo→text and text→content) */
  --space-section: var(--space-4xl);
  --space-block-mobile: calc(var(--space-4xl) + var(--space-2xs));   /* 72px — standard gap between stacked blocks on mobile */

  /* === BREAKPOINTS (reference only — CSS custom properties cannot be used in @media;
     keep literals in sync with these values) === */
  --breakpoint-nav: 438px;       /* nav collapses to hamburger */
  --breakpoint-mobile: 640px;
  --breakpoint-md: 800px;        /* layout/grid collapse — single-project, archive, contact shape */
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1280px;

  /* === CONTAINER & LAYOUT === */
  --container-max: 1280px;
  --container-content-max: 720px;
  --container-gutter: var(--space-lg);
  --grid-columns-projecten: 3;
  --grid-gap-projecten: var(--space-md);

  /* === RADII === */
  --radius-none: 0;
  --radius-pill: 9999px;     /* filter pills */
  --radius-sm: 10px;         /* filter panel, UI cards */

  /* === BORDERS === */
  --border-width-hairline: 1px;
  --border-width-default: 2px;
  --focus-outline-offset: 2px;   /* focus-ring gap */

  /* === Z-INDEX === */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* === MOTION === */
  --motion-duration-hover: 200ms;
  --motion-duration-transition: 300ms;
  --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* === FROST (shared frosted-surface treatment — landing modal / cookie card /
     mobile-menu overlay. --frost-blur holds the full backdrop-filter so callers apply it directly.) === */
  --frost-bg: rgba(255, 255, 255, 0.62);    /* landing modal card */
  --frost-blur: blur(18px) saturate(140%);  /* landing modal card */
  /* Card metrics mirror the landing card (landing/assets/style.css):
     same margins, type sizes, and square corners so both read as one object. */
  --frost-radius: var(--radius-none);          /* landing card — square corners */
  --frost-pad: clamp(14px, 2vw, 22px);         /* landing --card-pad */
  --frost-gap: calc(var(--frost-pad) * 1.3);   /* landing --gap-combined rhythm */
  --frost-leading: 1.45;                        /* landing --leading-card */
  --frost-title-size: 26px;                     /* landing --text-headline */
  --frost-body-size: clamp(14px, 1.2vw, 17px); /* landing --text-m */
  --frost-small-size: clamp(12px, 1vw, 14px);  /* landing --text-footer */
  --frost-card-min: 20rem;                     /* min-width floor shared by the cookie + imprint cards */

  /* === ICONS (mask SVGs, tinted via mask + background-color) === */
  /* Thin × — the same close glyph as the projecten filter panel + chips (keep in sync with search/browse.css). */
  --icon-close: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3%203%2013%2013M13%203%203%2013'%20stroke='%23000'%20stroke-width='1.2'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E");

}