/* styles.css — AdvoComply design system manifest.
   Token files are inlined here because nested CSS imports from public assets
   are not reliably resolved in the preview iframe. */

/* Saol Text: display/serif — headings & wordmark. Only Medium (500) is licensed here. */
@font-face {
  font-family: "Saol Text";
  src: url("./assets/fonts/SaolText-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Source Sans Pro: body & UI — full family (SIL OFL). */
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("./assets/fonts/SourceSansPro-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --color-primary:      #203059;
  --color-secondary:    #009fe3;
  --color-accent-light: #93d1f4;

  /* Accent palette */
  --color-rose:     #f8c3c3;
  --color-red:      #e94362;
  --color-bordeaux: #930e47;

  /* Neutral */
  --color-text:        #203059;
  --color-text-muted:  #5A6577;
  --color-background:  #FFFFFF;
  --color-surface:     #F4F8FC;
  --color-border:      #D9E2EC;
  --color-inverse:     #FFFFFF;

  /* Status */
  --color-info:     #009fe3;
  --color-error:    #e94362;
  --color-critical: #930e47;
  --color-success:  #f8c3c3;

  /* Semantic surface aliases */
  --surface-page:      var(--color-background);
  --surface-subtle:    var(--color-surface);
  --surface-dark:      var(--color-primary);
  --surface-card:      var(--color-background);

  /* Semantic text aliases */
  --text-body:      var(--color-text);
  --text-muted:     var(--color-text-muted);
  --text-heading:   var(--color-primary);
  --text-subhead:   var(--color-secondary);
  --text-on-dark:   var(--color-inverse);
  --text-on-primary: #cfe6f6;
  --text-link:      var(--color-secondary);

  /* Border aliases */
  --border-hairline: var(--color-border);
  --border-strong:   var(--color-primary);

  /* Families */
  --font-heading: "Saol Text", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans Pro", "Source Sans 3", Arial, Helvetica, sans-serif;

  /* Weights */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* Sizes */
  --font-size-h1:    54px;
  --font-size-h2:    46px;
  --font-size-h3:    22px;
  --font-size-body:  17px;
  --font-size-small: 14px;

  /* Line heights */
  --line-height-tight:  1.2;
  --line-height-normal: 1.6;

  /* Semantic type aliases */
  --type-h1-family: var(--font-heading);
  --type-h1-weight: var(--font-weight-medium);
  --type-h1-size:   var(--font-size-h1);
  --type-h2-family: var(--font-heading);
  --type-h2-weight: var(--font-weight-medium);
  --type-h2-size:   var(--font-size-h2);
  --type-h3-family: var(--font-body);
  --type-h3-weight: var(--font-weight-semibold);
  --type-h3-size:   var(--font-size-h3);
  --type-body-family: var(--font-body);
  --type-body-weight: var(--font-weight-regular);
  --type-body-size:   var(--font-size-body);
  --type-small-size:  var(--font-size-small);

  /* Spacing — base unit 8px */
  --space-unit: 8px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Corner radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(32, 48, 89, 0.06);
  --shadow-md: 0 4px 16px rgba(32, 48, 89, 0.10);
  --shadow-lg: 0 12px 32px rgba(32, 48, 89, 0.14);

  /* Layout */
  --content-max: 1120px;
  --focus-ring: 0 0 0 3px rgba(0, 159, 227, 0.35);
}

/* Source Sans Pro Hervorhebungen: immer Semibold (600), niemals Bold (700). */
b,
strong {
  font-weight: var(--font-weight-semibold);
}