/* ==========================================================================
   Design system tokens
   Structure follows Material Design 3 (m3.material.io), in three tiers:

     ref   Reference tokens   raw values: palette tones, typeface, weights
     sys   System tokens      meaning: color roles (light / dark), type scale,
                              shape, spacing, layout, motion, state layers
     comp  Component tokens   per component, in component-tokens.css

   Rules
   - Components use sys (or comp) tokens only, never ref tokens or raw values.
   - Color roles come in pairs: a role and its "on" role (text/icons on it).
   - Theme is set with data-theme="light" | "dark" on <html>.
   - Type, shape and component-internal sizes are in em. Spacing and layout are
     in rem so a step is the same size everywhere. 1rem = 16px at the 2133 frame
     and scales fluidly (see Scale).
   ========================================================================== */


/* ==========================================================================
   1. Scale (fluid root size)
   ========================================================================== */

:root {
  --scale-base: 16;
  --scale-frame: 2133;  /* design frame width: 1rem = 16px at this width. 2133 makes a 1440px laptop render at 0.675x */
  --scale-min: 992px;
  --scale-max: 1920px;
  --scale-width: clamp(var(--scale-min), 100vw, var(--scale-max));
  --scale-font: calc(var(--scale-width) / (var(--scale-frame) / var(--scale-base)));

  font-size: var(--scale-font);
}

/* Breakpoints: desktop >=992, tablet <=991, mobile landscape <=767, mobile portrait <=479 */
@media screen and (max-width: 991px) {
  :root { --scale-frame: 834; --scale-min: 768px; --scale-max: 991px; }
}
@media screen and (max-width: 767px) {
  :root { --scale-frame: 550; --scale-min: 480px; --scale-max: 767px; }
}
@media screen and (max-width: 479px) {
  :root { --scale-frame: 390; --scale-min: 320px; --scale-max: 479px; }
}


/* ==========================================================================
   2. Reference tokens (ref)
   ========================================================================== */

:root {
  /* Typeface */
  --ref-typeface-brand: "Manrope", sans-serif;
  --ref-typeface-plain: "Manrope", sans-serif;

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

  /* Neutral palette, tone 0 (black) to 100 (white). Warm greys. */
  --ref-palette-neutral-0: #000000;
  --ref-palette-neutral-10: #131313;
  --ref-palette-neutral-15: #1c1c1c;
  --ref-palette-neutral-20: #262626;
  --ref-palette-neutral-25: #2b2b2b;
  --ref-palette-neutral-30: #3a3a3a;
  --ref-palette-neutral-40: #5d5a52;
  --ref-palette-neutral-50: #6b6860;
  --ref-palette-neutral-60: #a9a69d;
  --ref-palette-neutral-80: #cfcdc7;
  --ref-palette-neutral-87: #dedcd7;
  --ref-palette-neutral-90: #e7e5e1;
  --ref-palette-neutral-94: #efeeec;
  --ref-palette-neutral-96: #f7f6f4;
  --ref-palette-neutral-100: #ffffff;

  /* Accent palette, built around the brand blue #32BADC (tone 60) */
  --ref-palette-accent-10: #00252f;
  --ref-palette-accent-30: #00566b;
  --ref-palette-accent-60: #32badc;
  --ref-palette-accent-80: #82d8ee;
  --ref-palette-accent-90: #c2ecf7;

  /* Error palette */
  --ref-palette-error-10: #410002;
  --ref-palette-error-20: #690005;
  --ref-palette-error-30: #93000a;
  --ref-palette-error-40: #ba1a1a;
  --ref-palette-error-80: #ffb4ab;
  --ref-palette-error-90: #ffdad6;
}


/* ==========================================================================
   3. System tokens (sys): color roles, theme independent
   "Media" roles are an extended color set for content that sits on a photo.
   They stay readable on any image, so they differ little between themes.
   ========================================================================== */

:root {
  --sys-color-scrim: var(--ref-palette-neutral-0);
  --sys-color-media-scrim: rgb(0 0 0 / 0.6);
  --sys-color-on-media: var(--ref-palette-neutral-100);
  --sys-color-on-media-variant: rgb(255 255 255 / 0.8);

  /* Always-dark surface: sections that stay dark in both themes */
  --sys-color-surface-dark: var(--ref-palette-neutral-10);
  --sys-color-on-surface-dark: var(--ref-palette-neutral-94);

  /* Accent: the brand blue is the same in both themes */
  --sys-color-accent: var(--ref-palette-accent-60);
  --sys-color-on-accent: var(--ref-palette-neutral-10);
}


/* ==========================================================================
   4. System tokens (sys): color roles, light theme (default)
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Primary */
  --sys-color-primary: var(--ref-palette-neutral-10);
  --sys-color-on-primary: var(--ref-palette-neutral-100);
  --sys-color-primary-container: var(--ref-palette-neutral-94);
  --sys-color-on-primary-container: var(--ref-palette-neutral-10);

  /* Secondary */
  --sys-color-secondary: var(--ref-palette-neutral-40);
  --sys-color-on-secondary: var(--ref-palette-neutral-100);
  --sys-color-secondary-container: var(--ref-palette-neutral-90);
  --sys-color-on-secondary-container: var(--ref-palette-neutral-10);

  /* Accent container */
  --sys-color-accent-container: var(--ref-palette-accent-90);
  --sys-color-on-accent-container: var(--ref-palette-accent-10);

  /* Error */
  --sys-color-error: var(--ref-palette-error-40);
  --sys-color-on-error: var(--ref-palette-neutral-100);
  --sys-color-error-container: var(--ref-palette-error-90);
  --sys-color-on-error-container: var(--ref-palette-error-10);

  /* Background and surface */
  --sys-color-background: var(--ref-palette-neutral-100);
  --sys-color-on-background: var(--ref-palette-neutral-10);
  --sys-color-surface: var(--ref-palette-neutral-100);
  --sys-color-on-surface: var(--ref-palette-neutral-10);
  --sys-color-on-surface-variant: var(--ref-palette-neutral-40);
  --sys-color-surface-container-lowest: var(--ref-palette-neutral-100);
  --sys-color-surface-container-low: var(--ref-palette-neutral-96);
  --sys-color-surface-container: var(--ref-palette-neutral-94);
  --sys-color-surface-container-high: var(--ref-palette-neutral-90);
  --sys-color-surface-container-highest: var(--ref-palette-neutral-87);

  /* Outline */
  --sys-color-outline: var(--ref-palette-neutral-10);
  --sys-color-outline-variant: var(--ref-palette-neutral-80);

  /* Inverse */
  --sys-color-inverse-surface: var(--ref-palette-neutral-10);
  --sys-color-inverse-on-surface: var(--ref-palette-neutral-100);

  /* Media (extended): content on a photo */
  --sys-color-media-primary: var(--ref-palette-neutral-100);
  --sys-color-on-media-primary: var(--ref-palette-neutral-10);
  --sys-color-media-container: var(--ref-palette-neutral-15);
  --sys-color-on-media-container: var(--ref-palette-neutral-100);
}


/* ==========================================================================
   5. System tokens (sys): color roles, dark theme
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  /* Primary */
  --sys-color-primary: var(--ref-palette-neutral-94);
  --sys-color-on-primary: var(--ref-palette-neutral-10);
  --sys-color-primary-container: var(--ref-palette-neutral-25);
  --sys-color-on-primary-container: var(--ref-palette-neutral-94);

  /* Secondary */
  --sys-color-secondary: var(--ref-palette-neutral-60);
  --sys-color-on-secondary: var(--ref-palette-neutral-10);
  --sys-color-secondary-container: var(--ref-palette-neutral-25);
  --sys-color-on-secondary-container: var(--ref-palette-neutral-90);

  /* Accent container */
  --sys-color-accent-container: var(--ref-palette-accent-30);
  --sys-color-on-accent-container: var(--ref-palette-accent-90);

  /* Error */
  --sys-color-error: var(--ref-palette-error-80);
  --sys-color-on-error: var(--ref-palette-error-20);
  --sys-color-error-container: var(--ref-palette-error-30);
  --sys-color-on-error-container: var(--ref-palette-error-90);

  /* Background and surface */
  --sys-color-background: var(--ref-palette-neutral-10);
  --sys-color-on-background: var(--ref-palette-neutral-94);
  --sys-color-surface: var(--ref-palette-neutral-10);
  --sys-color-on-surface: var(--ref-palette-neutral-94);
  --sys-color-on-surface-variant: var(--ref-palette-neutral-60);
  --sys-color-surface-container-lowest: var(--ref-palette-neutral-0);
  --sys-color-surface-container-low: #181818;
  --sys-color-surface-container: var(--ref-palette-neutral-15);
  --sys-color-surface-container-high: var(--ref-palette-neutral-20);
  --sys-color-surface-container-highest: var(--ref-palette-neutral-25);

  /* Outline */
  --sys-color-outline: var(--ref-palette-neutral-50);
  --sys-color-outline-variant: var(--ref-palette-neutral-30);

  /* Inverse */
  --sys-color-inverse-surface: var(--ref-palette-neutral-94);
  --sys-color-inverse-on-surface: var(--ref-palette-neutral-10);

  /* Media (extended): content on a photo */
  --sys-color-media-primary: var(--ref-palette-neutral-94);
  --sys-color-on-media-primary: var(--ref-palette-neutral-10);
  --sys-color-media-container: rgb(255 255 255 / 0.14);
  --sys-color-on-media-container: var(--ref-palette-neutral-100);
}


/* ==========================================================================
   6. System tokens (sys): typescale
   15 roles: display, headline, title, body, label, each in large / medium / small.
   Each role has a font shorthand (weight size/line-height family) and a tracking.
   Use: font: var(--sys-typescale-body-large-font);
        letter-spacing: var(--sys-typescale-body-large-tracking);
   Or add the matching utility class, for example .type-body-large.
   ========================================================================== */

:root {
  /* Display: hero and page titles */
  --sys-typescale-display-large-font: var(--ref-typeface-weight-bold) 4em/1.1 var(--ref-typeface-brand);
  --sys-typescale-display-large-tracking: -0.02em;
  --sys-typescale-display-medium-font: var(--ref-typeface-weight-bold) 3em/1.15 var(--ref-typeface-brand);
  --sys-typescale-display-medium-tracking: -0.02em;
  --sys-typescale-display-small-font: var(--ref-typeface-weight-bold) 2.5em/1.2 var(--ref-typeface-brand);
  --sys-typescale-display-small-tracking: -0.02em;

  /* Headline: statements and large short text */
  --sys-typescale-headline-large-font: var(--ref-typeface-weight-medium) 2em/1.4 var(--ref-typeface-brand);
  --sys-typescale-headline-large-tracking: -0.02em;
  --sys-typescale-headline-medium-font: var(--ref-typeface-weight-medium) 1.75em/1.2 var(--ref-typeface-brand);
  --sys-typescale-headline-medium-tracking: 0;
  --sys-typescale-headline-small-font: var(--ref-typeface-weight-medium) 1.5em/1.3 var(--ref-typeface-brand);
  --sys-typescale-headline-small-tracking: 0;

  /* Title: section and card titles */
  --sys-typescale-title-large-font: var(--ref-typeface-weight-semibold) 1.25em/1.3 var(--ref-typeface-brand);
  --sys-typescale-title-large-tracking: 0;
  --sys-typescale-title-medium-font: var(--ref-typeface-weight-semibold) 1.125em/1.3 var(--ref-typeface-brand);
  --sys-typescale-title-medium-tracking: 0;
  --sys-typescale-title-small-font: var(--ref-typeface-weight-semibold) 1em/1.3 var(--ref-typeface-brand);
  --sys-typescale-title-small-tracking: 0;

  /* Body: running text */
  --sys-typescale-body-large-font: var(--ref-typeface-weight-regular) 1.25em/1.3 var(--ref-typeface-plain);
  --sys-typescale-body-large-tracking: 0;
  --sys-typescale-body-medium-font: var(--ref-typeface-weight-regular) 16px/1.4 var(--ref-typeface-plain); /* fixed 16px; body itself stays on the fluid root size (see styles.css) */
  --sys-typescale-body-medium-tracking: 0;
  --sys-typescale-body-small-font: var(--ref-typeface-weight-regular) 0.875em/1.4 var(--ref-typeface-plain);
  --sys-typescale-body-small-tracking: 0;

  /* Label: buttons, tags, captions */
  --sys-typescale-label-large-font: var(--ref-typeface-weight-medium) 1em/1 var(--ref-typeface-plain);
  --sys-typescale-label-large-tracking: 0;
  --sys-typescale-label-medium-font: var(--ref-typeface-weight-medium) 0.875em/1 var(--ref-typeface-plain);
  --sys-typescale-label-medium-tracking: 0;
  --sys-typescale-label-small-font: var(--ref-typeface-weight-medium) 0.75em/1 var(--ref-typeface-plain);
  --sys-typescale-label-small-tracking: 0;
}

/* Smaller display and headline roles on small screens */
@media screen and (max-width: 767px) {
  :root {
    --sys-typescale-display-large-font: var(--ref-typeface-weight-bold) 2.75em/1.1 var(--ref-typeface-brand);
    --sys-typescale-display-medium-font: var(--ref-typeface-weight-bold) 2.25em/1.15 var(--ref-typeface-brand);
    --sys-typescale-display-small-font: var(--ref-typeface-weight-bold) 2em/1.2 var(--ref-typeface-brand);
    --sys-typescale-headline-large-font: var(--ref-typeface-weight-medium) 1.75em/1.4 var(--ref-typeface-brand);
    --sys-typescale-headline-medium-font: var(--ref-typeface-weight-medium) 1.375em/1.2 var(--ref-typeface-brand);
    --sys-typescale-body-large-font: var(--ref-typeface-weight-regular) 1.125em/1.3 var(--ref-typeface-plain);
  }
}

@media screen and (max-width: 479px) {
  :root {
    --sys-typescale-display-large-font: var(--ref-typeface-weight-bold) 2.5em/1.1 var(--ref-typeface-brand);
    --sys-typescale-body-large-font: var(--ref-typeface-weight-regular) 1em/1.3 var(--ref-typeface-plain);
  }
}


/* ==========================================================================
   7. System tokens (sys): shape (corner radius, in em)
   ========================================================================== */

:root {
  --sys-shape-corner-none: 0;
  --sys-shape-corner-extra-small: 0.25em;
  --sys-shape-corner-small: 0.625em;
  --sys-shape-corner-medium: 0.75em;
  --sys-shape-corner-large: 1em;
  --sys-shape-corner-extra-large: 1.75em;
  --sys-shape-corner-full: 50em;
}


/* ==========================================================================
   8. System tokens (sys): spacing (4px grid, in rem)
   The number is the step: spacing-4 = 4 x 4px = 16px at the 2133 frame.
   ========================================================================== */

:root {
  --sys-spacing-0: 0;
  --sys-spacing-1: 0.25rem;
  --sys-spacing-2: 0.5rem;
  --sys-spacing-3: 0.75rem;
  --sys-spacing-4: 1rem;
  --sys-spacing-5: 1.25rem;
  --sys-spacing-6: 1.5rem;
  --sys-spacing-8: 2rem;
  --sys-spacing-10: 2.5rem;
  --sys-spacing-12: 3rem;
  --sys-spacing-16: 4rem;
  --sys-spacing-20: 5rem;
  --sys-spacing-32: 8rem;
}


/* ==========================================================================
   9. System tokens (sys): layout
   ========================================================================== */

:root {
  --sys-layout-margin: var(--sys-spacing-10);   /* page gutter */
  --sys-layout-section-padding: var(--sys-spacing-32);  /* top and bottom of every section: the gap between two sections is twice this */
  --sys-layout-content-width: 46.75rem;          /* reading column: 748px at the 2133 frame, 505px on a 1440 laptop */
}

@media screen and (max-width: 767px) {
  :root { --sys-layout-margin: var(--sys-spacing-6); --sys-layout-section-padding: var(--sys-spacing-16); }
}


/* ==========================================================================
   10. System tokens (sys): motion
   Easing and duration follow the M3 scale, plus custom easings (osmo,
   energy, smooth, punch, relaxed, expo-in-out, jump, pop, anticipate, fade,
   elastic, bounce). "brand" is the default site ease and points at osmo.
   Each custom easing has a GSAP CustomEase of the same name in site.js.
   ========================================================================== */

:root {
  /* Custom easings */
  --sys-motion-easing-osmo: cubic-bezier(0.625, 0.05, 0, 1);
  --sys-motion-easing-energy: cubic-bezier(0.32, 0.72, 0, 1);
  --sys-motion-easing-smooth: cubic-bezier(0.38, 0.005, 0.215, 1);
  --sys-motion-easing-punch: cubic-bezier(0.19, 1, 0.22, 1);
  --sys-motion-easing-relaxed: cubic-bezier(0.7, 0, 0.3, 1);
  --sys-motion-easing-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --sys-motion-easing-jump: cubic-bezier(0.35, 1.5, 0.6, 1);
  --sys-motion-easing-pop: cubic-bezier(0.17, 0.67, 0.3, 1.33);
  --sys-motion-easing-anticipate: cubic-bezier(0.8, -0.4, 0.5, 1);
  --sys-motion-easing-fade: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Multi-point curves cannot be a cubic-bezier, so they use CSS linear() */
  --sys-motion-easing-elastic: linear(0, 0.1529 2%, 0.3059 4%, 0.4568 6%, 0.6016 8%, 0.7311 10%, 0.8455 12%, 0.9386 14%, 1.0125 16%, 1.0679 18%, 1.1058 20%, 1.1309 22%, 1.1413 24%, 1.1425 26%, 1.1359 28%, 1.1242 30%, 1.1083 32%, 1.0909 34%, 1.0732 36%, 1.0559 38%, 1.0396 40%, 1.0254 42%, 1.0136 44%, 1.0036 46%, 0.9958 48%, 0.99 50%, 0.9867 52%, 0.9839 54%, 0.9833 56%, 0.9839 58%, 0.9849 60%, 0.9863 62%, 0.9879 64%, 0.9897 66%, 0.9914 68%, 0.9932 70%, 0.9949 72%, 0.9965 74%, 0.998 76%, 0.9994 78%, 1.0005 80%, 1.0014 82%, 1.0018 84%, 1.002 86%, 1.002 88%, 1.0019 90%, 1.0016 92%, 1.0012 94%, 1.0008 96%, 1.0003 98%, 1);
  --sys-motion-easing-bounce: linear(0, 0.0025 2%, 0.0092 4%, 0.0198 6%, 0.0344 8%, 0.054 10%, 0.08 12%, 0.1284 14%, 0.1946 16%, 0.2786 18%, 0.3788 20%, 0.491 22%, 0.6102 24%, 0.7312 26%, 0.85 28%, 0.9337 30%, 0.9927 32%, 1.0343 34%, 1.0626 36%, 1.0803 38%, 1.0892 40%, 1.0904 42%, 1.085 44%, 1.0716 46%, 1.0561 48%, 1.0423 50%, 1.0302 52%, 1.0199 54%, 1.0114 56%, 1.0047 58%, 0.9997 60%, 0.9965 62%, 0.995 64%, 0.9951 66%, 0.9968 68%, 1 70%, 1.0035 72%, 1.006 74%, 1.0077 76%, 1.0086 78%, 1.0089 80%, 1.0086 82%, 1.008 84%, 1.007 86%, 1.0058 88%, 1.0044 90%, 1.0031 92%, 1.0019 94%, 1.0009 96%, 1.0002 98%, 1);
  --sys-motion-easing-brand: var(--sys-motion-easing-osmo);  /* default site ease */

  /* M3 easings */
  --sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  --sys-motion-duration-short1: 50ms;
  --sys-motion-duration-short2: 100ms;
  --sys-motion-duration-short3: 150ms;
  --sys-motion-duration-short4: 200ms;
  --sys-motion-duration-medium1: 250ms;
  --sys-motion-duration-medium2: 300ms;
  --sys-motion-duration-medium3: 350ms;
  --sys-motion-duration-medium4: 400ms;
  --sys-motion-duration-long1: 450ms;
  --sys-motion-duration-long2: 500ms;
  --sys-motion-duration-long3: 550ms;
  --sys-motion-duration-long4: 600ms;
  --sys-motion-duration-extra-long1: 700ms;
  --sys-motion-duration-extra-long2: 800ms;
}


/* ==========================================================================
   11. System tokens (sys): state layers
   Opacity of the "on" color laid over a container for each interaction state.
   ========================================================================== */

:root {
  --sys-state-hover-opacity: 0.08;
  --sys-state-focus-opacity: 0.1;
  --sys-state-pressed-opacity: 0.1;
  --sys-state-dragged-opacity: 0.16;
  --sys-state-disabled-opacity: 0.38;
}