/* =============================================================
   Festinato Identity v1 — Material for MkDocs overrides
   Source: portal/src/styles/tokens.css (forest, gold, ink, cream).
   ============================================================= */

:root,
[data-md-color-scheme="default"] {
    /* Brand primary — forest */
    --md-primary-fg-color:          #1d3a2f;
    --md-primary-fg-color--light:   #2d4f42;
    --md-primary-fg-color--dark:    #122620;
    --md-primary-bg-color:          #f4f1ea;
    --md-primary-bg-color--light:   #ede7d6;

    /* Accent — gold */
    --md-accent-fg-color:           #d99e2b;
    --md-accent-fg-color--transparent: rgba(244, 194, 91, 0.1);
    --md-accent-bg-color:           #0e0e10;
    --md-accent-bg-color--light:    #2a2826;

    /* Typography — Public Sans body, Space Grotesk display,
       JetBrains Mono code, Newsreader for serif italic accents. */
    --md-text-font:                 "Public Sans", system-ui, sans-serif;
    --md-code-font:                 "JetBrains Mono", ui-monospace, monospace;

    /* Surfaces — cream */
    --md-default-bg-color:          #f4f1ea;
    --md-default-fg-color:          #0e0e10;
    --md-default-fg-color--light:   #2a2826;
    --md-default-fg-color--lighter: #6b6760;
    --md-default-fg-color--lightest:#a8a49c;

    /* Code blocks — warm cream surface, ink text */
    --md-code-bg-color:             #ede7d6;
    --md-code-fg-color:             #0e0e10;

    /* Rules — same value the portal uses for hairline borders */
    --fst-rule:                     rgba(14, 14, 16, 0.14);
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color:          #5ea688;
    --md-primary-fg-color--light:   #82c4a6;
    --md-primary-fg-color--dark:    #3a7a5f;
    --md-primary-bg-color:          #0e0e10;
    --md-primary-bg-color--light:   #1a1a1d;

    --md-accent-fg-color:           #f4c25b;
    --md-accent-fg-color--transparent: rgba(244, 194, 91, 0.12);
    --md-accent-bg-color:           #f4f1ea;

    --md-default-bg-color:          #0e0e10;
    --md-default-bg-color--light:   #1a1a1d;
    --md-default-fg-color:          #f4f1ea;
    --md-default-fg-color--light:   rgba(244, 241, 234, 0.78);
    --md-default-fg-color--lighter: rgba(244, 241, 234, 0.55);
    --md-default-fg-color--lightest:rgba(244, 241, 234, 0.28);

    --md-code-bg-color:             #1a1a1d;
    --md-code-fg-color:             #f4f1ea;

    --fst-rule:                     rgba(244, 241, 234, 0.14);
}

/* Webfonts — match the portal exactly. Material loads Public Sans
   and JetBrains Mono for us via the `font:` block; we layer Space
   Grotesk (display) and Newsreader (serif italic) on top. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Space+Grotesk:wght@300..700&display=swap");

/* Header / tabs use the forest chrome from the portal. */
.md-header,
.md-tabs {
    background-color: var(--md-primary-fg-color);
}

/* The portal's italic ƒ wordmark — used in the header logo slot. */
.md-header__title .md-header__topic .md-ellipsis::before {
    content: "ƒ ";
    color: #f4c25b;                       /* gold */
    font-family: "Newsreader", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.15em;
    margin-right: 0.1em;
    transform: translateY(0.04em);
    display: inline-block;
}

/* Display weight on h1 / h2 — Space Grotesk, tight tracking. */
.md-typeset h1,
.md-typeset h2 {
    font-family: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.md-typeset h1 {
    color: var(--md-default-fg-color);
    font-size: 2.4rem;
    margin-bottom: 0.6em;
}
.md-typeset h2 {
    color: var(--md-default-fg-color);
    font-size: 1.45rem;
    margin-top: 2.2em;
    padding-top: 1.2em;
    border-top: 1px solid var(--fst-rule);
}

/* The portal's mono kicker — surfaces above each section via attr_list
   `{.kicker}`. Use it on h2 to get the small uppercase eyebrow look. */
.md-typeset h2.kicker,
.md-typeset .kicker {
    font-family: var(--md-code-font);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--md-primary-fg-color);
    border-top: none;
    padding-top: 0;
    margin-top: 2.4em;
    margin-bottom: 0.6em;
}

/* Serif italic emphasis — drop into copy as `*ƒword*` or with markup. */
.md-typeset em {
    font-family: "Newsreader", "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--md-primary-fg-color);
}

/* Tables — hairline rules, no zebra. Matches the portal's surfaces. */
.md-typeset table:not([class]) {
    border: 1px solid var(--fst-rule);
    box-shadow: none;
    font-size: 0.85rem;
}
.md-typeset table:not([class]) th {
    background: var(--md-primary-bg-color--light);
    font-family: var(--md-code-font);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
}
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
    border: none;
    border-bottom: 1px solid var(--fst-rule);
    padding: 0.7em 1em;
}

/* Inline code uses the warm-cream chip from the brand palette. */
.md-typeset code {
    border-radius: 2px;
    padding: 0.1em 0.3em;
}

/* Fenced code blocks — slightly tighter than the default. */
.md-typeset pre > code {
    border-radius: 2px;
    font-size: 0.78rem;
}

/* Selection picks up the gold accent. */
::selection { background: #f4c25b; color: #0e0e10; }

/* Footer — keep it ink-on-cream-warm so the chrome reads as a
   continuation of the portal. */
.md-footer {
    background: var(--md-accent-bg-color);
    color: rgba(244, 241, 234, 0.78);
}
.md-footer-meta {
    background: #07070a;
}