/* ibramushr theme - tokens.css
 * Design tokens carried over 1:1 from the Meridian design system.
 * Swatches, typography, sizing scales, theme surfaces.
 * Responsive scale steps at 991px / 767px match the template exactly.
 */

:root {
  /* -- swatches (exact template values) -------------------------------- */
  --swatch--dark: #181312;
  --swatch--dark-secondary: #2e2927;
  --swatch--light: #f3ebe4;
  --swatch--light-secondary: #d8cdbc;
  --swatch--brand: #fcaa2d;
  --swatch--dark-70: color-mix(in srgb, var(--swatch--dark) 70%, transparent);
  --swatch--light-70: color-mix(in srgb, var(--swatch--light) 70%, transparent);
  --swatch--light-100-4: #ffffff0a;
  --swatch--light-200: #f6f7f8;
  --swatch--transparent: #fff0;

  /* -- typography ------------------------------------------------------- */
  --_typography---font--primary-family: Geist, sans-serif;
  --_typography---font--secondary-family: Gambarino, "Times New Roman", serif;
  --_typography---font--tertiary-family: "Geist Mono", monospace;
  --_typography---font--primary-regular: 400;
  --_typography---font--primary-medium: 500;
  --_typography---font--primary-bold: 600;
  --_typography---font--secondary-regular: 400;
  --_typography---font--tertiary-regular: 400;
  --_typography---line-height--1-1: 1.1;
  --_typography---line-height--1-2: 1.2;
  --_typography---line-height--1-3: 1.3;
  --_typography---line-height--1-4: 1.4;
  --_typography---line-height--1-5: 1.5;
  --_typography---letter-spacing--0em: 0em;
  --_typography---letter-spacing--0-01em: -0.01em;
  --_typography---letter-spacing--0-02em: -0.02em;
  --_typography---letter-spacing--0-03em: -0.03em;

  /* -- type scale (desktop) ---------------------------------------------- */
  --_size---font-size--display: 6rem;
  --_size---font-size--h1: 4.5rem;
  --_size---font-size--h2: 3.5rem;
  --_size---font-size--h3: 2.75rem;
  --_size---font-size--h4: 2.25rem;
  --_size---font-size--h5: 1.75rem;
  --_size---font-size--h6: 1.5rem;
  --_size---font-size--text-large: 1.375rem;
  --_size---font-size--text-main: 1.125rem;
  --_size---font-size--text-small: 1rem;
  --_size---font-size--text-extra-small: 0.875rem;

  /* -- spacing scale (desktop) ------------------------------------------- */
  --_size---space--extra-small: 0.5rem;
  --_size---space--small: 0.75rem;
  --_size---space--medium: 1rem;
  --_size---space--main: 1.5rem;
  --_size---space--large: 2rem;
  --_size---space--extra-large: 3rem;
  --_size---space--huge: 4rem;

  /* -- section padding scale (desktop) ------------------------------------ */
  --_size---padding--none: 0rem;
  --_size---padding--small: 3rem;
  --_size---padding--main: 5rem;
  --_size---padding--large: 8rem;
  --_size---padding--extra-large: 10rem;
  --_size---padding--huge: 13rem;

  /* -- radii / site ------------------------------------------------------- */
  --_size---radius--small: 0.1875rem;
  --_size---radius--main: 0.375rem;
  --_size---radius--round: 100vw;
  --_size---site--gutter: 1rem;
  --_size---site--margin: 2rem;
  --site--width: 90rem;

  /* -- current text style (defaults; text-style utilities override) ------- */
  --_text-style---font-family: var(--_typography---font--primary-family);
  --_text-style---font-size: var(--_size---font-size--text-main);
  --_text-style---line-height: var(--_typography---line-height--1-5);
  --_text-style---font-weight: var(--_typography---font--primary-regular);
  --_text-style---letter-spacing: var(--_typography---letter-spacing--0em);

  /* -- theme: light (default) --------------------------------------------- */
  --_theme---background: var(--swatch--light);
  --_theme---text: var(--swatch--dark);
  --_theme---text-faded: var(--swatch--dark-70);
  --_theme---border: color-mix(in srgb, var(--swatch--dark) 16%, transparent);
  --_theme---accent: var(--swatch--brand);
  --_theme---card: var(--swatch--dark-secondary);
  --_theme---button-primary--background: var(--swatch--brand);
  --_theme---button-primary--background-hover: var(--swatch--brand);
  --_theme---button-primary--background-2: var(--swatch--light);
  --_theme---button-primary--background-2-hover: var(--swatch--light);
  --_theme---button-primary--border: var(--swatch--brand);
  --_theme---button-primary--border-hover: var(--swatch--brand);
  --_theme---button-primary--text: var(--swatch--dark);
  --_theme---button-primary--text-hover: var(--swatch--dark);
  --_theme---button-secondary--background: var(--swatch--light-secondary);
  --_theme---button-secondary--background-hover: var(--swatch--light-secondary);
  --_theme---button-secondary--background-2: var(--swatch--light);
  --_theme---button-secondary--background-2-hover: var(--swatch--light);
  --_theme---button-secondary--border: var(--swatch--light-secondary);
  --_theme---button-secondary--border-hover: var(--swatch--light-secondary);
  --_theme---button-secondary--text: var(--swatch--dark);
  --_theme---button-secondary--text-hover: var(--swatch--dark);

  /* -- current button style (defaults; button modifiers override) --------- */
  --_button-style---background: var(--_theme---button-primary--background);
  --_button-style---background-hover: var(--_theme---button-primary--background-hover);
  --_button-style---border: var(--_theme---button-primary--border);
  --_button-style---border-hover: var(--_theme---button-primary--border-hover);
  --_button-style---text: var(--_theme---button-primary--text);
  --_button-style---text-hover: var(--_theme---button-primary--text-hover);
}

/* -- responsive scale steps (match template breakpoints exactly) --------- */
@media screen and (max-width: 991px) {
  :root {
    --_size---font-size--display: 4.5rem;
    --_size---font-size--h1: 3.5rem;
    --_size---font-size--h2: 2.75rem;
    --_size---font-size--h3: 2.125rem;
    --_size---font-size--h4: 1.625rem;
    --_size---font-size--h5: 1.375rem;
    --_size---font-size--h6: 1.25rem;
    --_size---font-size--text-large: 1.125rem;
    --_size---font-size--text-main: 1rem;
    --_size---font-size--text-small: 0.9375rem;
    --_size---padding--small: 2.25rem;
    --_size---padding--main: 3.5rem;
    --_size---padding--large: 6rem;
    --_size---padding--extra-large: 7.5rem;
    --_size---padding--huge: 9rem;
    --_size---site--margin: 1.5rem;
    --_size---space--medium: 0.875rem;
    --_size---space--main: 1.25rem;
    --_size---space--large: 1.625rem;
    --_size---space--extra-large: 2.5rem;
    --_size---space--huge: 3rem;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --_size---font-size--display: 3rem;
    --_size---font-size--h1: 2.5rem;
    --_size---font-size--h2: 2rem;
    --_size---font-size--h3: 1.625rem;
    --_size---font-size--h4: 1.375rem;
    --_size---font-size--h5: 1.125rem;
    --_size---font-size--h6: 1rem;
    --_size---font-size--text-large: 0.9375rem;
    --_size---font-size--text-main: 0.875rem;
    --_size---font-size--text-small: 0.8125rem;
    --_size---font-size--text-extra-small: 0.75rem;
    --_size---padding--small: 1.5rem;
    --_size---padding--main: 2.5rem;
    --_size---padding--large: 4rem;
    --_size---padding--extra-large: 5rem;
    --_size---padding--huge: 7rem;
    --_size---site--gutter: 0.75rem;
    --_size---site--margin: 1rem;
    --_size---space--extra-small: 0.375rem;
    --_size---space--small: 0.625rem;
    --_size---space--medium: 0.75rem;
    --_size---space--main: 1rem;
    --_size---space--large: 1.25rem;
    --_size---space--extra-large: 1.5rem;
    --_size---space--huge: 2rem;
  }
}

/* -- theme surfaces ------------------------------------------------------- */
.u-theme-light-secondary {
  --_theme---background: var(--swatch--light-secondary);
  --_theme---text: var(--swatch--dark);
  --_theme---text-faded: var(--swatch--dark-70);
  --_theme---border: color-mix(in srgb,var(--swatch--dark) 16%,transparent);
  --_theme---accent: var(--swatch--brand);
  --_theme---button-primary--text: var(--swatch--dark);
  --_theme---card: var(--swatch--dark-secondary);
  --_theme---button-primary--background-2: var(--swatch--light);
  --_theme---button-secondary--background: var(--swatch--light);
  --_theme---button-primary--background: var(--swatch--brand);
  --_theme---button-primary--border: var(--swatch--brand);
  --_theme---button-primary--background-hover: var(--swatch--brand);
  --_theme---button-primary--border-hover: var(--swatch--brand);
  --_theme---button-primary--background-2-hover: var(--swatch--light);
  --_theme---button-primary--text-hover: var(--swatch--dark);
  --_theme---button-secondary--border: var(--swatch--light);
  --_theme---button-secondary--background-2: var(--swatch--light-secondary);
  --_theme---button-secondary--text: var(--swatch--dark);
  --_theme---button-secondary--background-hover: var(--swatch--light);
  --_theme---button-secondary--border-hover: var(--swatch--light);
  --_theme---button-secondary--background-2-hover: var(--swatch--light-secondary);
  --_theme---button-secondary--text-hover: var(--swatch--dark);
}

.u-theme-dark {
  --_theme---background: var(--swatch--dark);
  --_theme---text: var(--swatch--light);
  --_theme---text-faded: var(--swatch--light-70);
  --_theme---border: color-mix(in srgb,var(--swatch--light) 16%,transparent);
  --_theme---accent: var(--swatch--brand);
  --_theme---button-primary--text: var(--swatch--dark);
  --_theme---card: var(--swatch--dark-secondary);
  --_theme---button-primary--background-2: var(--swatch--light);
  --_theme---button-secondary--background: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-primary--background: var(--swatch--brand);
  --_theme---button-primary--border: var(--swatch--brand);
  --_theme---button-primary--background-hover: var(--swatch--brand);
  --_theme---button-primary--border-hover: var(--swatch--brand);
  --_theme---button-primary--background-2-hover: var(--swatch--light);
  --_theme---button-primary--text-hover: var(--swatch--dark);
  --_theme---button-secondary--border: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-secondary--background-2: var(--swatch--dark-secondary);
  --_theme---button-secondary--text: var(--swatch--light);
  --_theme---button-secondary--background-hover: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-secondary--border-hover: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-secondary--background-2-hover: var(--swatch--dark-secondary);
  --_theme---button-secondary--text-hover: var(--swatch--light);
}

.u-theme-dark-secondary {
  --_theme---background: var(--swatch--dark-secondary);
  --_theme---text: var(--swatch--light);
  --_theme---text-faded: var(--swatch--light-70);
  --_theme---border: color-mix(in srgb,var(--swatch--light) 16%,transparent);
  --_theme---accent: var(--swatch--brand);
  --_theme---button-primary--text: var(--swatch--dark);
  --_theme---card: var(--swatch--dark-secondary);
  --_theme---button-primary--background-2: var(--swatch--light);
  --_theme---button-secondary--background: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-primary--background: var(--swatch--brand);
  --_theme---button-primary--border: var(--swatch--brand);
  --_theme---button-primary--background-hover: var(--swatch--brand);
  --_theme---button-primary--border-hover: var(--swatch--brand);
  --_theme---button-primary--background-2-hover: var(--swatch--light);
  --_theme---button-primary--text-hover: var(--swatch--dark);
  --_theme---button-secondary--border: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-secondary--background-2: var(--swatch--dark-secondary);
  --_theme---button-secondary--text: var(--swatch--light);
  --_theme---button-secondary--background-hover: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-secondary--border-hover: color-mix(in srgb,var(--swatch--light) 8%,transparent);
  --_theme---button-secondary--background-2-hover: var(--swatch--dark-secondary);
  --_theme---button-secondary--text-hover: var(--swatch--light);
}