/*
 * Rodenstock reusable CSS design tokens
 * Source of truth: docs/brand-tokens.json
 *
 * Usage:
 *   <main data-brand="rodenstock">...</main>
 *   <section data-brand="colormatic">...</section>
 *
 * Approved logo, font, image, icon, pattern, and gradient assets remain the
 * production authority. No dark-mode palette is defined by the source guides.
 */

/*
 * PUBLISHED COPY. Source: Brand Guideline Rodenstock/rodenstock-design-tokens.css
 * Do not invent tokens. Do not edit HEX here; override in base.css.
 */

:root {
  /* Rodenstock primitive colors: declared HTML values for digital CSS. */
  --rod-color-white: #ffffff;
  --rod-color-dark-blue: #0c2340;
  --rod-color-middle-blue: #004976;
  --rod-color-light-blue: #4ac9e3;
  --rod-color-mint: #0ac8be;
  --rod-color-standard-grey: #91afbe;
  --rod-color-mineral-teal: #0091a5;
  --rod-color-dark-mint-online: #08aaa1;
  --rod-color-cool-grey-online: #85919f;
  --rod-color-cool-black-online: #021020;
  --rod-color-cool-white-online: #f7f9f8;
  --rod-color-black: #000000;

  /*
   * Separately declared source RGB values. Some do not numerically equal the
   * declared HTML values; use these only when an RGB-specific source is needed.
   */
  --rod-color-white-rgb: 255 255 255;
  --rod-color-dark-blue-rgb: 10 35 65;
  --rod-color-middle-blue-rgb: 0 70 115;
  --rod-color-light-blue-rgb: 75 200 230;
  --rod-color-mint-rgb: 10 200 190;
  --rod-color-standard-grey-rgb: 145 175 190;
  --rod-color-mineral-teal-rgb: 0 145 165;

  /* Rodenstock typography. Font files and licenses are not bundled. */
  --rod-font-brand: "Trade Gothic Next", "Arial Narrow", Arial, sans-serif;
  --rod-font-headline: "Trade Gothic Next Condensed", "Arial Narrow", Arial, sans-serif;
  --rod-font-correspondence: "Arial Narrow", Arial, sans-serif;
  --rod-font-cyrillic-arabic: "Arial Unicode MS", Arial, sans-serif;
  --rod-font-weight-regular: 400;
  --rod-font-weight-bold: 700;
  --rod-line-height-headline: 1;
  --rod-line-height-body: 1.3;

  /* A4 reference type scale from CD25, not universal responsive sizes. */
  --rod-type-a4-headline-size: 40pt;
  --rod-type-a4-headline-leading: 40pt;
  --rod-type-a4-intro-size: 20pt;
  --rod-type-a4-intro-leading: 26pt;
  --rod-type-a4-body-size: 10pt;
  --rod-type-a4-body-leading: 13pt;
  --rod-type-a4-subheading-size: 10pt;
  --rod-type-a4-subheading-leading: 13pt;
  --rod-type-a4-small-size: 8pt;
  --rod-type-a4-small-leading: 11pt;
  --rod-type-a4-page-label-size: 7pt;

  /* Layout and logo reference tokens. R means the wordmark R height. */
  --rod-layout-margin-ratio: 1.5;
  --rod-grid-a4-columns: 8;
  --rod-grid-a4-gutter: 4mm;
  --rod-grid-row-count-compact: 8;
  --rod-grid-row-count-expanded: 12;
  --rod-logo-primary-min-print: 25mm;
  --rod-logo-primary-min-digital: 180px;
  --rod-logo-secondary-min-print: 35mm;
  --rod-logo-secondary-min-digital: 250px;
  --rod-logo-clear-space-ratio: 1;
  --rod-logo-symbol-clear-space-ratio: 0.25;
  --rod-logo-claim-gap-ratio: 0.5;
  --rod-logo-claim-height-ratio: 0.333;

  /* Approximate composition guidance; values are not fixed quotas. */
  --rod-distribution-white: 55%;
  --rod-distribution-mint: 2%;
  --rod-distribution-dark-blue: 25%;
  --rod-distribution-middle-blue: 13%;
  --rod-distribution-blue-gradient: 5%;
  --rod-image-overlay-opacity: 50%;
  --rod-social-subject-safe-area: 10%;

  /* Digital approximation. Use an approved source asset when supplied. */
  --rod-gradient-blue: linear-gradient(
    to bottom,
    var(--rod-color-light-blue) 0%,
    var(--rod-color-middle-blue) 60%,
    var(--rod-color-dark-blue) 100%
  );
  --rod-gradient-blue-reversed: linear-gradient(
    to bottom,
    var(--rod-color-dark-blue) 0%,
    var(--rod-color-middle-blue) 60%,
    var(--rod-color-light-blue) 100%
  );

  /* ColorMatic primitive colors: declared HTML values for digital CSS. */
  --cm-color-steel-blue: #405368;
  --cm-color-white: #ffffff;
  --cm-color-sky-blue: #87bde7;
  --cm-color-caramel-brass: #a57930;
  --cm-color-sahara-dune: #c8a776;
  --cm-color-moss-green: #5a6a65;

  /* Unverified: declared RGB/CMYK conflict materially with the declared HEX. */
  --cm-color-midnight-green-unverified: #1e4d5f;

  /* Separately declared ColorMatic RGB values. */
  --cm-color-steel-blue-rgb: 64 83 104;
  --cm-color-white-rgb: 255 255 255;
  --cm-color-sky-blue-rgb: 136 189 232;
  --cm-color-caramel-brass-rgb: 165 121 48;
  --cm-color-sahara-dune-rgb: 200 167 118;
  --cm-color-moss-green-rgb: 90 106 101;
  --cm-color-midnight-green-rgb-unverified: 30 77 55;

  /* ColorMatic tint strengths mix each color toward white. */
  --cm-tint-85: 85%;
  --cm-tint-65: 65%;
  --cm-tint-45: 45%;
  --cm-tint-30: 30%;
  --cm-tint-20: 20%;
  --cm-tint-10: 10%;

  /* ColorMatic typography. Font files and licenses are not bundled. */
  --cm-font-body: Barlow, Arial, sans-serif;
  --cm-font-headline: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --cm-font-weight-regular: 400;
  --cm-font-weight-medium: 500;
  --cm-font-weight-semibold: 600;

  /* ColorMatic logo and co-branding geometry. */
  --cm-logo-primary-min-print: 25mm;
  --cm-logo-primary-min-digital: 180px;
  --cm-logo-secondary-min-print: 30mm;
  --cm-logo-secondary-min-digital: 250px;
  --cm-signet-min-print: 4mm;
  --cm-logo-clear-space-ratio: 0.25;
  --cm-cobrand-container-max-height: 10%;
  --cm-cobrand-container-message-gap: 16.6667%;

  /* HAPD supplemental identity geometry. */
  --hapd-logo-min-print: 25mm;
  --hapd-logo-min-digital: 140px;
  --hapd-logo-width-relative-to-rodenstock: 90%;
  --hapd-logo-clear-space-ratio: 1;
  --hapd-logo-min-separation-ratio: 2;
}

/* Default semantic API: Rodenstock master brand. */
:root,
[data-brand="rodenstock"] {
  color-scheme: light;
  --brand-color-background: var(--rod-color-white);
  --brand-color-surface: var(--rod-color-cool-white-online);
  --brand-color-surface-muted: var(--rod-color-standard-grey);
  --brand-color-foreground: var(--rod-color-dark-blue);
  --brand-color-foreground-muted: var(--rod-color-cool-grey-online);
  --brand-color-primary: var(--rod-color-dark-blue);
  --brand-color-primary-foreground: var(--rod-color-white);
  --brand-color-secondary: var(--rod-color-middle-blue);
  --brand-color-secondary-foreground: var(--rod-color-white);
  --brand-color-accent: var(--rod-color-mint);
  --brand-color-accent-foreground: var(--rod-color-dark-blue);
  --brand-color-border: var(--rod-color-standard-grey);
  --brand-color-focus: var(--rod-color-dark-mint-online);
  --brand-color-link: var(--rod-color-middle-blue);
  --brand-gradient-primary: var(--rod-gradient-blue);
  --brand-font-body: var(--rod-font-brand);
  --brand-font-heading: var(--rod-font-headline);
  --brand-font-weight-regular: var(--rod-font-weight-regular);
  --brand-font-weight-emphasis: var(--rod-font-weight-bold);
  --brand-line-height-body: var(--rod-line-height-body);
  --brand-line-height-heading: var(--rod-line-height-headline);
}

/*
 * ColorMatic semantic API. Interactive surfaces use light tints with Steel
 * Blue text for readable UI; full secondary colors remain decorative tokens.
 */
[data-brand="colormatic"] {
  color-scheme: light;
  --brand-color-background: var(--cm-color-white);
  --brand-color-surface: var(--cm-color-white);
  --brand-color-surface-muted: color-mix(in srgb, var(--cm-color-steel-blue) 10%, white);
  --brand-color-foreground: var(--cm-color-steel-blue);
  --brand-color-foreground-muted: color-mix(in srgb, var(--cm-color-steel-blue) 65%, white);
  --brand-color-primary: var(--cm-color-steel-blue);
  --brand-color-primary-foreground: var(--cm-color-white);
  --brand-color-secondary: color-mix(in srgb, var(--cm-color-sky-blue) 20%, white);
  --brand-color-secondary-foreground: var(--cm-color-steel-blue);
  --brand-color-accent: color-mix(in srgb, var(--cm-color-caramel-brass) 20%, white);
  --brand-color-accent-foreground: var(--cm-color-steel-blue);
  --brand-color-border: color-mix(in srgb, var(--cm-color-steel-blue) 20%, white);
  --brand-color-focus: var(--cm-color-steel-blue);
  --brand-color-link: var(--cm-color-steel-blue);
  --brand-gradient-primary: none;
  --brand-font-body: var(--cm-font-body);
  --brand-font-heading: var(--cm-font-headline);
  --brand-font-weight-regular: var(--cm-font-weight-regular);
  --brand-font-weight-emphasis: var(--cm-font-weight-semibold);
  --brand-line-height-body: 1.3;
  --brand-line-height-heading: 1;
}

/*
 * Product aliases preserve source-specified foregrounds. The accessible
 * foreground is supplied separately because several source pairs fail WCAG
 * AA for normal digital text and require brand-owner approval when changed.
 */
[data-product="big-exact"] {
  --product-color-field: var(--rod-color-dark-blue);
  --product-color-foreground: var(--rod-color-white);
  --product-color-accessible-foreground: var(--rod-color-white);
}

[data-product="big-norm"] {
  --product-color-field: var(--rod-color-mint);
  --product-color-foreground: var(--rod-color-white);
  --product-color-accessible-foreground: var(--rod-color-dark-blue);
}

[data-product="standard"] {
  --product-color-field: var(--rod-color-standard-grey);
  --product-color-foreground: var(--rod-color-black);
  --product-color-accessible-foreground: var(--rod-color-black);
}

[data-product="impression"] {
  --product-color-field: var(--rod-color-dark-blue);
  --product-color-foreground: var(--rod-color-white);
  --product-color-accessible-foreground: var(--rod-color-white);
}

[data-product="multigressiv"] {
  --product-color-field: var(--rod-color-middle-blue);
  --product-color-foreground: var(--rod-color-white);
  --product-color-accessible-foreground: var(--rod-color-white);
}

[data-product="progressiv"] {
  --product-color-field: var(--rod-color-mint);
  --product-color-foreground: var(--rod-color-white);
  --product-color-accessible-foreground: var(--rod-color-dark-blue);
}

[data-product="mineral"] {
  --product-color-field: var(--rod-color-mineral-teal);
  --product-color-foreground: var(--rod-color-white);
  --product-color-accessible-foreground: var(--rod-color-black);
}

[data-product="manufaktur"] {
  --product-color-field: var(--rod-color-light-blue);
  --product-color-foreground: var(--rod-color-white);
  --product-color-accessible-foreground: var(--rod-color-dark-blue);
}