/**
 * BIBLIOTECA DIGITALE — design tokens.
 *
 * The suite's single palette, typography scale and shape scale. Every bd-*
 * front-end stylesheet declares this file's handle (`bd-tokens`) in its own
 * $deps, so it is always in the document first whatever enqueue strategy the
 * consumer uses.
 *
 * ── Where the values come from ───────────────────────────────────────────────
 *
 * The institutional colours (Pantone 2757 C #001E60, Pantone 2122 C #9BAEE4),
 * the "edu" colours and the two font families come from the publisher's brand
 * manual, Grafica/MATERIALI/GIAPPICHELLI - Manuale immagine coordinata.pdf.
 * The type scale, line-height and radius follow www.giappichelli.it
 * (.claude/plans/_cross-plugin/2026-10-07-metriche-come-giappichelli.md).
 * Everything else is still sampled pixel by pixel from the September 2026
 * mockups in Grafica/ (the *_SETTEMBRE26.jpg files). The reasoning, the WCAG
 * measurements and the per-token provenance live in
 * BD-docs/sottosistemi/05-design-system.md. This file is the only source of
 * the values: nothing is pasted into Divi's Custom CSS box or a child theme.
 * Two copies of the same :root in the cascade is the fastest way to stop
 * knowing which one wins.
 *
 * ── Why this ships inside a plugin ───────────────────────────────────────────
 *
 * CSS pasted into "Divi -> Theme Options -> Custom CSS" or into a child theme
 * is text anyone in wp-admin can delete without noticing, and no release
 * restores it. Shipped here it is versioned, arrives with the zip, updates with
 * the plugin, and no configuration panel can reach it.
 *
 * ── What is inherited from Divi, and what is not ─────────────────────────────
 *
 * Divi 5 ships no design-token set: not one of its stylesheets defines a custom
 * property. What it does put on :root at runtime is site configuration, and
 * only two groups of it are stable enough to build on:
 *
 *   - Five global colors whose ids are hardcoded in every Divi installation
 *     (GlobalData::$customizer_colors). Every OTHER global color an admin
 *     creates gets a per-site UUID id, so it can never be named here.
 *   - Six typography variables (Fonts::enqueue_footer_fonts()).
 *
 * The five colors, the body family and the body line-height are inherited
 * below, so changing them in Divi propagates to the whole suite. The heading
 * family is not: Divi's heading font is Karla until Tiempos is uploaded, and
 * following it would put the serif headings back on the sans face. Each is written as
 * `var(--gcid-..., <our value>)`: when Divi has it we follow, and when Divi is
 * absent, inactive, or simply did not emit that variable for this page — which
 * happens, since with Dynamic Assets on Divi prints only the colors its own
 * modules reference — our sampled value stands. There is no state in which a
 * plugin is left without a colour.
 *
 * Three Divi variables are deliberately NOT inherited, because Divi emits them
 * whether or not anyone chose them, so inheriting would silently replace a
 * measured value with a factory default rather than follow a decision:
 *
 *   --et_global_heading_font_weight   always emitted, defaults to 500; ours
 *                                     differ by face (serif 500, sans 700)
 *   --et_global_body_font_weight      same, defaults to 500
 *   --et_global_body_font_size        always emitted, defaults to 14px; the
 *                                     body text is 15px
 *
 * In the other direction, a Divi Global Color can point AT any name defined
 * here through its "var CSS" toggle (write `bd-success-soft`, lowercase, no
 * leading -- and no var()) — the mechanism bd-b2b-teams already uses for
 * --bd-team-color. That is how a hand-built Divi module uses the semantic and
 * shape tokens Divi has no counterpart for, without anyone retyping a hex.
 *
 * @package BD_Shared
 */

:root {

    /* ── 1. Giappichelli blue — the platform's colour, the same for everyone ──
       One blue since the brand manual: Pantone 2757 C, #001E60, for text,
       titles, links, icons AND solid fills (15.5:1 on white). The mockups'
       two blues — a pure one for text, a navy one for fills — were pre-manual
       approximations of this single value; --bd-blue-navy stays for the
       consumers that name it and resolves to the same colour. The hover and
       pressed shades are derived [DER], not sampled. The light blue is the
       manual's secondary colour, Pantone 2122 C: decorative on white (2.2:1),
       text-capable on --bd-blue (7.1:1). */
    --bd-blue:         var(--gcid-primary-color, #001E60);
    --bd-blue-navy:    var(--gcid-secondary-color, #001E60);   /* alias, same value */
    --bd-blue-dark:    #00153F;   /* hover, deep blue surfaces [DER]         */
    --bd-blue-darkest: #000B22;   /* pressed [DER]                           */
    --bd-blue-light:   #9BAEE4;   /* Pantone 2122 C: cover bands, decoration;
                                     text only on --bd-blue                  */
    --bd-blue-muted:   var(--bd-blue-light);   /* disabled states — the
                                     mockups' #B1C1E5 approximated 2122 C    */
    --bd-blue-tint:    #EAF1FC;   /* active menu item, icon circles          */
    --bd-blue-wash:    #F3F5FB;   /* bands, side column                      */

    /* The secondary button (1.53.0), as www.giappichelli.it's "Scopri tutte":
       white with navy text and border at rest, navy fill with white text on
       hover, focus and active; 15.50:1 in both states. Names kept from 1.49.0,
       values changed: BD-divi's global CSS reads them too. */
    --bd-btn-secondary-bg:         var(--bd-white);
    --bd-btn-secondary-bg-hover:   var(--bd-blue);
    --bd-btn-secondary-text-hover: var(--bd-text-invert);

    /* ── 2. Surfaces and borders ─────────────────────────────────────────── */
    --bd-white:         #FFFFFF;
    --bd-surface:       #FAFAFD;              /* card background             */
    --bd-bg-page:       #F9FAFE;              /* content area                */
    --bd-bg-subtle:     #F3F5FB;              /* sidebar, alternating bands  */
    --bd-border:        #DDE2F1;              /* decorative separators only  */
    --bd-border-strong: #7B8EC9;              /* field and control borders,
                                                 3.20:1 — WCAG 1.4.11        */
    --bd-border-subtle: rgba(15, 23, 42, .08);

    /* ── 3. Text ─────────────────────────────────────────────────────────────
       In the September mockups even the hero's intro paragraph is full blue. The
       blue-greys below are for running text and metadata, where full blue
       would be tiring to read at length. */
    --bd-text:         var(--gcid-body-color, #022A61);
    --bd-text-heading: var(--gcid-heading-color, #001E60);
    --bd-link:         var(--gcid-link-color, #001E60);
    --bd-text-slate:   #1E3351;   /* metadata: author, subject               */
    --bd-text-muted:   #5A6989;   /* secondary, inactive nav                 */
    --bd-text-subtle:  #5F6B94;   /* counters, placeholders — darkened from
                                     the mockups' #9AA2BE, unreadable at
                                     2.53:1                                  */
    --bd-text-invert:  #FFFFFF;

    /* ── 4. Institution accent — the one colour that varies per viewer ───────
       Emitted by BD_B2B_Teams_Branding_Styles on every page load and always defined:
       no team, no colour configured, or logged out all fall back on their own.
       This file never redefines --bd-team-color; it only reads it.

       Use it ONLY where the mockups use it — header user button, active tab
       underline, highlighted card number and its icon circle. Widening that is
       how you end up with a different platform per university instead of one
       platform that recognises who is using it. */
    --bd-accent: var(--bd-team-color, var(--bd-blue));

    /* Soft tint of the accent, for highlighted icon circles. The first line is
       the fallback for browsers without color-mix(). */
    --bd-accent-soft: var(--bd-blue-tint);
    --bd-accent-soft: color-mix(in srgb, var(--bd-accent) 10%, #FFFFFF);

    /* ── 5. Semantic colours — fixed, NEVER derived from the accent ──────────
       Not a preference: in the two dashboard mockups the "TERMINATO" badge
       stays neutral grey even where the institution's accent is a completely
       different hue. The label carries the state, not just the colour, which
       is what makes an accent landing near a status colour harmless.

       --bd-danger is the one chosen rather than measured value: no error state
       appears in any mockup. It is a red at 6.54:1 on white. */
    --bd-success:      #00B85C;   /* fill / icon with a label — decorative   */
    --bd-success-ink:  #007E3F;   /* text, and icons standing alone          */
    --bd-success-soft: #E9F6EE;
    --bd-warning:      #C68209;   /* fill / icon with a label — decorative   */
    --bd-warning-ink:  #966307;   /* "SCADENZA" badge text                   */
    --bd-warning-soft: #FDF1E1;
    --bd-danger:       #B3261E;
    --bd-danger-soft:  #FBEAE8;
    --bd-danger-soft-strong: #F8DCD9;   /* .bd-btn--danger hover/focus; --bd-danger
                                           text on it 5.05:1 (on -soft 5.61:1) */
    --bd-info:         #001E60;
    --bd-info-soft:    #EAF1FC;
    --bd-neutral:      #5B6387;   /* "TERMINATO" badge text — darkened from
                                     the mockups' #646C94 (4.00:1)           */
    --bd-neutral-soft: #E0E4EC;

    /* Three rules that follow from the measured ratios, and bind:
       1. NEVER white text on --bd-warning (3.18:1) or --bd-success (2.62:1).
          On --bd-danger it is fine: 6.54:1.
       2. An icon standing ALONE, with no label beside it, uses the -ink
          variant: --bd-success 2.62:1 and --bd-cat-formazione 2.80:1 miss the
          3:1 of WCAG 1.4.11. With a text label beside it the icon is
          redundant and exempt.
       3. --bd-border (1.29:1) is for a decorative separator, never for the
          border of a field or a control — that needs --bd-border-strong. */

    /* ── 6. Catalogue categories ─────────────────────────────────────────── */
    --bd-cat-libri:           #001E60;
    --bd-cat-riviste:         #00B85C;
    --bd-cat-formazione:      #F8741C;   /* decorative only                  */
    --bd-cat-formazione-ink:  #B94D06;   /* text, and icons standing alone   */
    --bd-cat-formazione-soft: #FEF2EA;
    --bd-cat-edu:             #808080;
    --bd-edu:                 #EB5B4C;   /* the «edu» logotype, official SVG.
                                            3.4:1 on white: logotype only,
                                            never running text              */
    --bd-edu-ink:             #201E5B;   /* the "Giappichelli" wordmark beside
                                            «edu», official SVG, 15.0:1      */

    /* ── 7. Typography — the brand manual's two faces ────────────────────────
       Headings: Tiempos Headline, the manual's primary face, named directly
       (not through Divi's heading font). It is commercial (Klim); the
       @font-face rules are emitted by BD_Core_Shared_Design_Tokens only for the
       woff2 files present in assets/fonts/tiempos/. Until they ship, Georgia,
       the manual's sanctioned substitute, renders.

       Body: Karla, the manual's secondary face (SIL OFL), chosen in Divi's
       Customizer and served locally by the divi-child theme; it and the
       line-height follow Divi's Customizer (15px / 1.5 there too). */
    --bd-font-serif: "Tiempos Headline", Georgia, "Times New Roman", serif;
    --bd-font-sans:  var(--et_global_body_font, "Karla"), -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bd-lh:         var(--et_global_body_font_height, 1.5);

    /* Scale aligned with www.giappichelli.it (2026-10-07). Twins of BD-divi's
       fs-* Design Variables; the three heading sizes step down under 767px:
       see the phone block after :root. */
    --bd-fs-h1: 30px;   /* serif 500                                         */
    --bd-fs-h2: 26px;   /* serif 500                                         */
    --bd-fs-h3: 18px;   /* sans 700                                          */
    --bd-fs-lg: 17px;
    --bd-fs-md: 15px;   /* body                                              */
    --bd-fs-sm: 13px;   /* secondary, metadata                               */
    --bd-fs-xs: 11px;   /* badges: uppercase, letter-spacing ~.06em          */

    --bd-fw-heading:       700;   /* sans headings (h3, card titles)          */
    --bd-fw-heading-serif: 500;   /* serif headings (h1, h2, dialog titles)   */
    --bd-fw-body:          400;
    --bd-fw-medium:        600;

    /* ── 8. Shape — one radius rule ──────────────────────────────────────────
       One radius for every rectangle (4px, as www.giappichelli.it's 3-4px)
       except a button, which takes --bd-btn-radius (3px, as the site's),
       and a full circle for every square control, in Divi (Design Variable
       radius) and here alike. The one exception is a book cover: an image,
       not a control, drawn square (2px in components.css). */
    --bd-radius:        4px;    /* every rectangle but a button: input, card, panel, modal, badge, chip */
    --bd-radius-circle: 50%;    /* every square control drawn round: icon button, dot, close     */
    --bd-radius-pill:   999px;  /* deprecated: no pill in the September mockups — use --bd-radius */
    --bd-radius-sm:     var(--bd-radius);   /* deprecated alias, kept for consumers not yet updated */
    --bd-radius-lg:     var(--bd-radius);   /* deprecated alias                                      */
    --bd-btn-radius:    3px;    /* every .bd-btn and modal button, as www.giappichelli.it's buttons;
                                   --bd-radius stays 4px for panels, cards, fields */

    /* ── 8b. Button sizes — www.giappichelli.it's small / default / large ────
       Default 44px at --bd-fs-md and --bd-space-lg sides (its add-to-cart);
       small 36px / 14px / 15px sides, large 52px / 18px / 17px sides. Not
       stepped down on phones: 44px is the touch target the phone keeps. */
    --bd-btn-h:         44px;
    --bd-btn-h-sm:      36px;
    --bd-btn-h-lg:      52px;
    --bd-btn-fs-sm:     14px;
    --bd-btn-fs-lg:     18px;
    --bd-btn-pad-x-sm:  15px;
    --bd-btn-pad-x-lg:  17px;

    /* ── 9. Spacing — the mockups' internal card rhythm ──────────────────── */
    --bd-space-xs:  4px;
    --bd-space-sm:  8px;
    --bd-space:    12px;
    --bd-space-md: 16px;
    --bd-space-lg: 24px;
    --bd-space-xl: 40px;

    /* ── 10. Book covers ─────────────────────────────────────────────────────
       The publisher's jackets are all portrait, 946x1402, and every layout that
       shows one sizes its box from this ratio rather than from the asset, so a
       row of covers is a row of equal heights whatever each file turns out to
       be. A file off the ratio is shown whole inside the box, never cropped. */
    --bd-cover-ratio: 946 / 1402;

    /* ── 11. Night palette — the reader viewers' brand dark theme ────────────
       Shared by bd-read-epub-viewer and bd-read-pdf-viewer so their "night" theme is one
       palette, not two. Derived from the brand navy #001E60 (background,
       surfaces, borders) and the logo light blue #9BAEE4 (accent). Applied
       only when a reader picks the theme: no prefers-color-scheme rule reads
       these. WCAG 2.x ratios measured on bg / surface / accent-soft; text
       needs 4.5:1, a control boundary 3:1 (1.4.11). */
    --bd-night-bg:            #0B1430;   /* page and frame background         */
    --bd-night-surface:       #16213F;   /* panels, toolbars, sheets          */
    --bd-night-border:        #2A3762;   /* decorative separators only:
                                            1.57 / 1.38 — never a control     */
    --bd-night-border-strong: #6576AE;   /* control borders: 4.11 / 3.59 / 3.03 */
    --bd-night-text:          #E6EAF5;   /* 15.08 / 13.19 / 11.11             */
    --bd-night-muted:         #8F9BC0;   /* secondary text: 6.58 / 5.76 / 4.85 */
    --bd-night-accent:        var(--bd-blue-light, #9BAEE4);   /* text 8.27 / 7.23 / 6.09;
                                            as a control 8.27 on bg          */
    --bd-night-accent-soft:   #1F2D57;   /* active / hover fill, decorative;
                                            text and accent stay >= 4.5 on it */

    /* ── 12. Book card geometry (1.60.0) ─────────────────────────────────────
       The grid/carousel card measured on www.giappichelli.it (approved
       proposal B, plan _cross-plugin/2026-10-24-book-card-restyle): a 240x300
       cover box with the jacket contained inside a 30px/36px margin and 15px
       padding, a 45px inset at the slot's left, a 275px text column, 14/20
       type. Colours stay the brand tokens above; only the hairline is new. */
    --bd-hairline:            #C9C9C9;   /* decorative rule under the cover box: never a control */
    --bd-card-inset:          45px;
    --bd-card-content-w:      275px;
    --bd-card-cover-w:        240px;
    --bd-card-cover-ratio:    4 / 5;
    --bd-card-cover-inset-x:  36px;
    --bd-card-cover-inset-y:  30px;
    --bd-card-cover-pad-y:    15px;
    --bd-card-fs:             14px;
    --bd-card-lh:             20px;
    --bd-card-fw-title:       800;
    --bd-card-fs-isbn:        12px;
    --bd-card-lh-isbn:        16px;
    --bd-card-more-size:      32px;   /* the "..." circle; a 44px hit area around it */
    --bd-card-chip-h:         21px;
    --bd-card-chip-bottom:    12px;
    --bd-card-row-gap:        56px;   /* between grid rows */
}

/* ── 7b. Phone type scale ────────────────────────────────────────────────────
   Under Divi's phone breakpoint (767px) the three heading sizes of
   section 7 step down. The values are
   the twins BD-divi declares as the Design Variables fs-h1-phone /
   fs-h2-phone / fs-h3-phone, so a Divi preset and a bd-* sheet set the same
   word to the same size — kept identical by hand, since neither file can
   read the other. The body, small and badge sizes do not change: 15px is
   already the phone reading size. This is the only width query in this
   file, and a bd-core-shared sheet queries only Divi's 980px and 767px
   (see the header of components.css). */
@media (max-width: 767px) {
    :root {
        --bd-fs-h1: 26px;
        --bd-fs-h2: 22px;
        --bd-fs-h3: 16px;
    }
}