/* =============================================================================
   eDS design tokens — plain-CSS export
   -----------------------------------------------------------------------------
   These are the eds-lib design system tokens, transcribed from

     projects/finiti/eds-angular/styles/_colors.scss
     projects/finiti/eds-angular/styles/_tokens.scss
     projects/finiti/eds-angular/styles/_fonts.scss

   Of the 95 tokens here, 61 mirror the library. The other 34 are values the
   Figma file carries but eds-lib does not expose, so this file is NOT yet a
   drop-in for `@finiti/eds-angular/styles`. Every one of them is marked

       NOT IN LIB - <where it comes from>

   right where it is declared, and `grep "NOT IN LIB" tokens.css` lists them
   all. A marker covers every declaration after it up to the next comment, and
   never covers a token the library does have. The reason they are missing is that `_colors.scss` emits no CSS at all
   (its 114 entries are SCSS variables, resolved at compile time) and the type
   scale ships sizes without line heights or tracking.

   TOKENS-PROPOSAL.md turns this list into a concrete change to _tokens.scss.

   A fourth group has no equivalent in either place - neither a library token
   nor a Figma variable - and sits in section 9 under an `--eid-` prefix.

   Contents
     1. Font faces
     2. Palettes
     3. Light scheme
     4. Spacing
     5. Radius
     6. Elevation and motion
     7. Typography
     8. Breakpoints
     9. Page tokens with no eds-lib equivalent
    10. Typography utility classes
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Font faces — _fonts.scss
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Orto RNIDS";
    src: url("../assets/fonts/OrtoRNIDS-Regular.woff2") format("woff2"), url("../assets/fonts/OrtoRNIDS-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orto RNIDS";
    src: url("../assets/fonts/OrtoRNIDS-Medium.woff2") format("woff2"), url("../assets/fonts/OrtoRNIDS-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orto RNIDS";
    src: url("../assets/fonts/OrtoRNIDS-SemiBold.woff2") format("woff2"), url("../assets/fonts/OrtoRNIDS-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Orto RNIDS";
    src: url("../assets/fonts/OrtoRNIDS-Bold.woff2") format("woff2"), url("../assets/fonts/OrtoRNIDS-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---------------------------------------------------------------------------
     2. Palettes — _colors.scss
     ------------------------------------------------------------------------ */
    /* Only the palette entries this page needs. The library holds the full ramps
     in _colors.scss, but as SCSS variables - none of them reach a browser, so
     all six below are missing. */
    /* NOT IN LIB - Figma sys/light/primary, Schemes/Primary, mUprava/Primary.
     $core-primary in _colors.scss. */
    --eds-core-primary: #003964;
    /* NOT IN LIB - $core-secondary in _colors.scss. No Figma variable on this
     page; carried only so --eds-color-secondary below resolves. */
    --eds-core-secondary: #e31e30;
    /* NOT IN LIB - the hero heading. Figma has it as a bare hex with no variable
     behind it, which happens to equal $primary-20. The gap is really that no
     semantic token covers "heading on a tinted section". */
    --eds-primary-20: #003259;
    /* NOT IN LIB - Figma ref/primary/primary90. The library does expose the
     semantic pair (color-primary-container) with the same value. */
    --eds-primary-90: #d1e4ff;
    /* NOT IN LIB - Figma ref/primary/primary95, the wash behind the upload field
     and behind a read-only text field. The library knows the value - the
     form-field component hardcodes it as --eds-ff-bg-readonly: #eaf1ff - but
     never names it, so a page that wants the same wash outside a form field
     has nothing to reach for. */
    --eds-primary-95: #eaf1ff;
    /* NOT IN LIB - Figma ref/neutral/neutral20, body copy. Note Figma says
     #303032 and _colors.scss says #2F3033; the library value is used here. */
    --eds-neutral-20: #2f3033;
    /* NOT IN LIB - Figma ref/neutral/neutral25, the quieter step under body copy:
     the service description on Мој ИД Отвореног Балкана and the legend under
     the three certificate actions on Квалификовани електронски сертификат. The
     library's ramp jumps from neutral20 straight to white, and fading neutral20
     to 80% - which is how `.section__text` reaches a lighter tone - lands on
     #595a5c, lighter than this and a different colour. */
    --eds-neutral-25: #3b3b3d;
    /* NOT IN LIB - Figma ref/tertiary/tertiary99, the mobile header surface.
     eds-lib's header block paints the same surface $light-surface (#F8F9FF),
     so the library and the frame already disagree here. */
    --eds-tertiary-99: #fbfcff;
    /* ---------------------------------------------------------------------------
     3. Light scheme — _tokens.scss

     eGDS overrides Schemes/Primary to the core brand blue. The library's
     `$light-primary` still carries the untouched Material default (#36618E),
     which is why the header block in eds-lib
     (src/blocks/header/header.component.scss) pins its own primary to #003964.
     The same override is applied here.
     ------------------------------------------------------------------------ */

    --eds-color-primary: var(--eds-core-primary);
    --eds-color-on-primary: #ffffff;
    --eds-color-primary-container: var(--eds-primary-90);
    --eds-color-on-primary-container: var(--eds-core-primary);
    --eds-color-secondary: var(--eds-core-secondary);
    --eds-color-on-secondary: #ffffff;
    --eds-color-surface: #f8f9ff;
    --eds-color-surface-variant: #dde3ea;
    --eds-color-on-surface: #191c20;
    --eds-color-on-surface-variant: #41484d;
    --eds-color-outline: #71787e;
    --eds-color-shadow: #000000;
    /* NOT IN LIB - the four below, and nothing above them. They exist in
     _tokens.scss as $light-surfaceContainerLowest / -Low / -Container and
     $light-outlineVariant, but as SCSS only. M3 semantic tokens the library
     holds and does not emit; navigation-menu already reaches for them
     internally. */
    --eds-color-surface-container-lowest: #ffffff;
    --eds-color-surface-container-low: #f2f3fa;
    --eds-color-surface-container: #eceef4;
    --eds-color-outline-variant: #c1c7ce;
    /* NOT IN LIB - $light-surfaceDim, same story as the four above: an M3
     semantic the library holds only as SCSS. It is the hairline around the
     chat's message bubble and its question field. */
    --eds-color-surface-dim: #d8dae0;
    /* ---------------------------------------------------------------------------
     4. Spacing — _tokens.scss
     ------------------------------------------------------------------------ */
    --eds-space-0: 0;
    --eds-space-1: 4px;
    --eds-space-2: 8px;
    --eds-space-3: 12px;
    --eds-space-4: 16px;
    --eds-space-5: 20px;
    --eds-space-6: 24px;
    --eds-space-7: 32px;
    --eds-space-8: 40px;
    --eds-space-9: 48px;
    --eds-space-xs: 4px;
    --eds-space-sm: 8px;
    --eds-space-md: 16px;
    --eds-space-lg: 24px;
    --eds-space-xl: 32px;
    /* ---------------------------------------------------------------------------
     5. Radius — _tokens.scss
     ------------------------------------------------------------------------ */
    --eds-radius-none: 0;
    --eds-radius-xs: 2px;
    --eds-radius-sm: 4px;
    --eds-radius-md: 8px;
    --eds-radius-lg: 12px;
    --eds-radius-xl: 16px;
    --eds-radius-full: 999px;
    /* ---------------------------------------------------------------------------
     6. Elevation and motion — _tokens.scss
     ------------------------------------------------------------------------ */
    --eds-elevation-0: none;
    --eds-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --eds-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --eds-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    --eds-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, 0.18);
    --eds-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, 0.2);
    --eds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --eds-duration-fast: 120ms;
    --eds-duration-medium: 200ms;
    --eds-duration-slow: 320ms;
    /* ---------------------------------------------------------------------------
     7. Typography — _tokens.scss / _fonts.scss

     The library ships the family, the weights and the M3 size ramp. The
     matching line heights and tracking are added here to complete each M3
     role; the values are the ones the Figma text styles carry.
     ------------------------------------------------------------------------ */

    --eds-font-family-sans: "Orto RNIDS", system-ui, "Roboto", Arial, sans-serif;
    --eds-font-weight-regular: 400;
    --eds-font-weight-medium: 500;
    --eds-font-weight-semibold: 600;
    --eds-font-weight-black: 900;
    --eds-font-size-label-small: 11px;
    --eds-font-size-label-medium: 12px;
    --eds-font-size-label-large: 14px;
    --eds-font-size-body-small: 12px;
    --eds-font-size-body-medium: 14px;
    --eds-font-size-body-large: 16px;
    --eds-font-size-title-small: 14px;
    --eds-font-size-title-medium: 16px;
    --eds-font-size-title-large: 22px;
    --eds-font-size-headline-small: 24px;
    --eds-font-size-headline-medium: 28px;
    --eds-font-size-headline-large: 32px;
    /* NOT IN LIB - none of the line heights or tracking below exist in the
     library, which ships --eds-font-size-* on its own. Without them a text
     style cannot be reproduced from tokens at all, which is why this page had
     to name them. Values come from the Figma text styles (title/large,
     body/medium, label/small-emphasized, ...); Figma also carries some of them
     as variables in their own right - Static/Body Small/Line Height = 16,
     Static/Body Small/Tracking = 0.4. */
    --eds-line-height-label-small: 16px;
    --eds-line-height-label-medium: 16px;
    --eds-line-height-label-large: 20px;
    --eds-line-height-body-small: 16px;
    --eds-line-height-body-medium: 20px;
    --eds-line-height-body-large: 24px;
    --eds-line-height-title-small: 20px;
    --eds-line-height-title-medium: 20px;
    --eds-line-height-title-large: 28px;
    --eds-line-height-headline-small: 32px;
    --eds-line-height-headline-large: 40px;
    --eds-tracking-label-small: 0.3px;
    --eds-tracking-label-medium: 0.5px;
    --eds-tracking-label-large: 0.1px;
    --eds-tracking-body-small: 0.4px;
    --eds-tracking-body-medium: 0.25px;
    --eds-tracking-body-large: 0.5px;
    --eds-tracking-title-small: 0.1px;
    --eds-tracking-title-medium: 0.15px;
    --eds-tracking-title-large: 0;
    --eds-tracking-headline-small: 0;
    --eds-tracking-headline-large: 0;
    /* ---------------------------------------------------------------------------
     8. Breakpoints - _tokens.scss

     Media queries cannot read custom properties, so these stay comments. The
     literals in styles.css are the same four values.

       sm  600px    md  905px    lg  1240px    xl  1440px

     eds-lib's header block defaults to md; this page moves it to lg (see
     README).
     ------------------------------------------------------------------------ */
    /* ---------------------------------------------------------------------------
     9. Page tokens with no eds-lib equivalent

     Seven values in this design are not in the library yet. They are kept
     separate so they are easy to promote once the library gains a token
     for them.
     ------------------------------------------------------------------------ */
    /* Figma color/background/ice-blue — the hero and guide panel wash */
    --eid-color-ice-blue: #eff7ff;
    /* Figma dynamic-extended/green/green-700 — the affirmative status line: an
     issued ИД Отвореног Балкана, an active qualified certificate. The library
     has no extended palette at all — its schemes stop at
     primary/secondary/tertiary/error — so there is no "this is in order" green
     to reach for, where the red beside it is schemes/error and shared.css
     already names it --eid-color-error. 4.5:1 on the card's white, so it clears
     AA at the 14px both pages set it at. */
    --eid-color-status-ok: #6a904e;
    /* Figma Brand Dark Blue — the eID.gov.rs wordmark */
    --eid-color-brand-dark-blue: #253965;
    /* Figma Black/100 — the top bar divider */
    --eid-color-black-100: #fafafb;
    /* Figma Forma — the elevation on the registration card. eds-lib elevation 1-5
     are all darker and tighter than this one. */
    --eid-shadow-forma: 0 2px 15px 5px rgba(2, 2, 2, 0.06);
    /* Figma Elevation/Light/Bottom/03 — the elevation on an expansion panel. A
     wide, very soft drop with a blue-grey tint; eds-lib's elevation ramp is
     neutral black and much tighter, so none of --eds-elevation-1..5 stands in
     for it. */
    --eid-shadow-elevation-bottom-03: 0 8px 24px 0 rgba(40, 41, 61, 0.08);
    /* Figma dynamic-extended/orange/orange-50 — the ground of the "important"
     note on the contact form. The library has no extended palette at all: its
     schemes stop at primary/secondary/tertiary/error. */
    --eid-color-note-bg: #fff7ee;
}

/* -----------------------------------------------------------------------------
   10. Typography utility classes

   One class per M3 role. Each sets family, weight, size, line height and
   tracking, so a single class fully describes the text style.
   -------------------------------------------------------------------------- */

.eds-headline-large,
.eds-headline-small,
.eds-title-large,
.eds-title-medium,
.eds-title-small,
.eds-body-large,
.eds-body-medium,
.eds-body-small,
.eds-label-large,
.eds-label-medium,
.eds-label-small {
    font-family: var(--eds-font-family-sans);
}

.eds-headline-large {
    font-size: var(--eds-font-size-headline-large);
    line-height: var(--eds-line-height-headline-large);
    letter-spacing: var(--eds-tracking-headline-large);
    font-weight: var(--eds-font-weight-regular);
}

.eds-headline-small {
    font-size: var(--eds-font-size-headline-small);
    line-height: var(--eds-line-height-headline-small);
    letter-spacing: var(--eds-tracking-headline-small);
    font-weight: var(--eds-font-weight-regular);
}

.eds-title-large {
    font-size: var(--eds-font-size-title-large);
    line-height: var(--eds-line-height-title-large);
    letter-spacing: var(--eds-tracking-title-large);
    font-weight: var(--eds-font-weight-regular);
}

.eds-title-medium {
    font-size: var(--eds-font-size-title-medium);
    line-height: var(--eds-line-height-title-medium);
    letter-spacing: var(--eds-tracking-title-medium);
    font-weight: var(--eds-font-weight-medium);
}

.eds-title-small {
    font-size: var(--eds-font-size-title-small);
    line-height: var(--eds-line-height-title-small);
    letter-spacing: var(--eds-tracking-title-small);
    font-weight: var(--eds-font-weight-medium);
}

.eds-body-large {
    font-size: var(--eds-font-size-body-large);
    line-height: var(--eds-line-height-body-large);
    letter-spacing: var(--eds-tracking-body-large);
    font-weight: var(--eds-font-weight-regular);
}

.eds-body-medium {
    font-size: var(--eds-font-size-body-medium);
    line-height: var(--eds-line-height-body-medium);
    letter-spacing: var(--eds-tracking-body-medium);
    font-weight: var(--eds-font-weight-regular);
}

.eds-body-small {
    font-size: var(--eds-font-size-body-small);
    line-height: var(--eds-line-height-body-small);
    letter-spacing: var(--eds-tracking-body-small);
    font-weight: var(--eds-font-weight-regular);
}

.eds-label-large {
    font-size: var(--eds-font-size-label-large);
    line-height: var(--eds-line-height-label-large);
    letter-spacing: var(--eds-tracking-label-large);
    font-weight: var(--eds-font-weight-medium);
}

.eds-label-medium {
    font-size: var(--eds-font-size-label-medium);
    line-height: var(--eds-line-height-label-medium);
    letter-spacing: var(--eds-tracking-label-medium);
    font-weight: var(--eds-font-weight-medium);
}

.eds-label-small {
    font-size: var(--eds-font-size-label-small);
    line-height: var(--eds-line-height-label-small);
    letter-spacing: var(--eds-tracking-label-small);
    font-weight: var(--eds-font-weight-medium);
}

/* The design uses two roles at an emphasised weight. */
.eds-emphasized {
    font-weight: var(--eds-font-weight-medium);
}

.eds-emphasized-strong {
    font-weight: var(--eds-font-weight-semibold);
}