/*
 * Solarized theme variables.
 *
 * Ported from Ethan Schoonover's Solarized palette
 * (https://ethanschoonover.com/solarized/). The light default uses the
 * Solarized *light* mode (warm cream background base3 + deliberately
 * low-contrast base00/base01 text) and the `[data-theme="dark"]` variant uses
 * Solarized's *dark* mode (base03 background / base0 text); the eight
 * Solarized accents are mapped onto Bulma's brand/admonition roles.
 *
 * NOTE — scheme-main-l / text-l / text-strong-l are pinned here (see the
 * mixin). This is a deliberate waiver of Pitfall 5: Solarized's identity is
 * its specific background and muted-text lightness, so the light L axis is
 * fixed rather than left to Bulma. Because that also freezes Bulma's own dark
 * switching, the `[data-theme="dark"]` block re-derives these (and the
 * light-only pins) for the native Solarized dark palette.
 *
 * Colour provenance (Solarized name -> hex -> HSL):
 *   base3   #fdf6e3  scheme background (cream)
 *   base00  #657b83  body text
 *   base01  #586e75  strong/heading text
 *   blue    #268bd2  primary + link
 *   cyan    #2aa198  info
 *   green   #859900  success
 *   yellow  #b58900  warning
 *   red     #dc322f  danger
 *   violet  #6c71c4  secondary (library extension colour)
 *
 * Compiled by `build.ts` into dist/solarized/theme.min.css.
 */

// --- scheme / text ---
// Solarized light: warm cream page (base3), cool muted text (base00). The
// background and text lightness are pinned (Pitfall 5 waiver) to preserve
// Solarized's low-contrast signature. scheme-s is dialled to 65% (base3
// itself is ~87% saturated at L94, but that over-saturates the mid-tone
// border/background surfaces; 65% keeps them close to base2 #eee8d5).
$scheme-h: 44 !default;
$scheme-s: 65% !default;
$scheme-main-l: 94% !default; // base3 #fdf6e3
$text-h: 196 !default;
$text-s: 13% !default;
$text-l: 46% !default; // base00 #657b83
$text-strong-l: 40% !default; // base01 #586e75

// --- dark mode (native Solarized dark; driven by [data-theme="dark"]) ---
// Solarized flips warm-light to cool-dark: base03 background, base0 text.
// scheme-s is dialled down (like the light 65%) so the mid-tone dark surfaces
// (borders at L21/24) don't over-saturate — base03 is ~100% sat at L11.
$scheme-dark-h: 192 !default;
$scheme-dark-s: 35% !default;
$scheme-dark-main-l: 11% !default; // base03 #002b36
$text-dark-h: 186 !default;
$text-dark-s: 8% !default;
$text-dark-l: 55% !default; // base0 #839496
$text-dark-strong-l: 60% !default; // base1 #93a1a1

// --- primary / link (Solarized blue #268bd2; link shares the hue) ---
$primary-h: 205 !default;
$primary-s: 69% !default;
$primary-l: 49% !default;
$primary-invert-l: 100% !default; // white on blue (conventional; verify in Phase C)
$link-h: 205 !default;
$link-s: 69% !default;
$link-l: 49% !default;
$link-invert-l: 100% !default;
$link-on-scheme-l: $link-l !default; // body links = the button blue (Pitfall 2)

// --- secondary (Solarized violet #6c71c4 — a distinct supporting accent) ---
// invert-l defaults to primary's; violet at L60 takes white cleanly.
$secondary-h: 237 !default;
$secondary-s: 43% !default;
$secondary-l: 60% !default;
$secondary-invert-l: 100% !default;
$custom-colors: ("secondary": (hsl($secondary-h, $secondary-s, $secondary-l))) !default;

// --- dark (Solarized base02 #073642 — the palette's chrome/nav tone) ---
// Solarized builds its UI chrome (toolbars, nav) from the dark base tones and
// reserves the vivid accents (blue etc.) for content. Rather than a bespoke
// `.navbar.is-primary` override, we redefine Bulma's first-class `dark` colour
// to base02 so the nav can use `.navbar.is-dark` — a real palette member. The
// website selects it per-page via the `navColor` frontmatter (default:
// primary), so only this theme opts its nav into the dark tone. `.is-dark`
// buttons/tags elsewhere in the showcase inherit the same teal (on-palette).
$dark-h: 192 !default;
$dark-s: 81% !default;
$dark-l: 14% !default;
$dark-invert-l: 96% !default; // pale light text/icons on the teal chrome

// --- admonition palette (Solarized cyan / green / yellow / red) ---
// invert-l picked per accent luminance, not HSL-L: Solarized's green and
// yellow are luminous, so gold warning takes black text (yellow->black is
// universal); blue/cyan/green/red take white (verify the marginal ones —
// blue, cyan, green — on the preview in Phase C).
$info-h: 175 !default; // cyan #2aa198
$info-s: 59% !default;
$info-l: 40% !default;
$info-invert-l: 100% !default;
$success-h: 68 !default; // green #859900
$success-s: 100% !default;
$success-l: 30% !default;
$success-invert-l: 100% !default;
$warning-h: 45 !default; // yellow #b58900 (dark gold)
$warning-s: 100% !default;
$warning-l: 36% !default;
$warning-invert-l: 0% !default; // black on gold
$danger-h: 1 !default; // red #dc322f
$danger-s: 71% !default;
$danger-l: 52% !default;
$danger-invert-l: 100% !default;

// --- radius (Solarized is a colour scheme with no defined corner radius;
// inherit Bulma's default. Declared only so the Pitfall 6 control-radius
// pin can interpolate a literal value) ---
$radius: 0.375rem !default;

@mixin variables {
  --bulma-scheme-h: #{$scheme-h};
  --bulma-scheme-s: #{$scheme-s};
  --bulma-scheme-main-l: #{$scheme-main-l}; // Pitfall 5 waiver (cream bg)
  --bulma-text-h: #{$text-h};
  --bulma-text-s: #{$text-s};
  --bulma-text-l: #{$text-l}; // Pitfall 5 waiver (base00 body text)
  --bulma-text-strong-l: #{$text-strong-l}; // Pitfall 5 waiver (base01 strong text)
  --bulma-primary-h: #{$primary-h};
  --bulma-primary-s: #{$primary-s};
  --bulma-primary-l: #{$primary-l};
  --bulma-primary-invert-l: #{$primary-invert-l};
  --bulma-secondary-invert-l: #{$secondary-invert-l};
  --bulma-link-h: #{$link-h};
  --bulma-link-s: #{$link-s};
  --bulma-link-l: #{$link-l};
  --bulma-link-invert-l: #{$link-invert-l};
  --bulma-link-on-scheme-l: #{$link-on-scheme-l};
  --bulma-info-h: #{$info-h};
  --bulma-info-s: #{$info-s};
  --bulma-info-l: #{$info-l};
  --bulma-info-invert-l: #{$info-invert-l};
  --bulma-success-h: #{$success-h};
  --bulma-success-s: #{$success-s};
  --bulma-success-l: #{$success-l};
  --bulma-success-invert-l: #{$success-invert-l};
  --bulma-warning-h: #{$warning-h};
  --bulma-warning-s: #{$warning-s};
  --bulma-warning-l: #{$warning-l};
  --bulma-warning-invert-l: #{$warning-invert-l};
  --bulma-danger-h: #{$danger-h};
  --bulma-danger-s: #{$danger-s};
  --bulma-danger-l: #{$danger-l};
  --bulma-danger-invert-l: #{$danger-invert-l};

  // dark = Solarized base02 (chrome/nav tone); see the $dark-* block above.
  --bulma-dark-h: #{$dark-h};
  --bulma-dark-s: #{$dark-s};
  --bulma-dark-l: #{$dark-l};
  --bulma-dark-invert-l: #{$dark-invert-l};

  // Pitfall 6: pin every --bulma-control-* on the shared control selector
  // group so bare `.button` / `.input` / `.textarea` / `.select select` /
  // `.pagination-*` and their icons resolve padding, border, height, and
  // radius correctly. `.is-*` modifiers re-declare with higher
  // specificity, so per-modifier behaviour is preserved.
  .button,
  .control,
  .file-cta,
  .file-name,
  .input,
  .pagination,
  .pagination-ellipsis,
  .pagination-link,
  .pagination-next,
  .pagination-previous,
  .select,
  .select select,
  .textarea {
    --bulma-control-border-width: 1px;
    --bulma-control-height: 2.5em;
    --bulma-control-padding-vertical: calc(0.5em - 1px);
    --bulma-control-padding-horizontal: calc(0.75em - 1px);
    --bulma-control-radius: #{$radius};
  }

  // Pitfall 8: `--bulma-link-text` is set on :root via an hsl(var(...))
  // chain that can fall back to UA-default on `<a>`; pin literally.
  a {
    --bulma-link-text: hsl(#{$link-h}, #{$link-s}, #{$link-on-scheme-l});
  }

  // Pitfall 14: `.breadcrumb a` reads `--bulma-breadcrumb-item-color`
  // (= var(--bulma-link-text)), whose hsl(var(), var(), var()) chain fails
  // at the child and drops the brand colour to the UA default. Pin the
  // literal link colour on the parent `.breadcrumb` (base colour only).
  .breadcrumb {
    --bulma-breadcrumb-item-color: hsl(#{$link-h}, #{$link-s}, #{$link-on-scheme-l});
  }

  // Pitfall 4: burger icon on .navbar.is-primary follows primary-invert.
  .navbar.is-primary {
    --bulma-navbar-burger-color: var(--bulma-primary-invert);
  }

  // Solarized's global nav uses .navbar.is-dark (navColor: dark); tie its
  // burger colour to dark-invert for the same Pitfall 4 reason.
  .navbar.is-dark {
    --bulma-navbar-burger-color: var(--bulma-dark-invert);
  }

  // Pitfall 9: pin <use>-pattern SVG icons inside .panel-icon to 1em so
  // they sit in the icon slot instead of overflowing rightward.
  .panel-icon svg {
    width: 1em;
    height: 1em;
  }

  .panel-icon svg use {
    width: 100%;
    height: 100%;
  }

  // Pitfall 10: pin a fully-resolved two-stop shadow on the shadowed
  // containers (the :root var() chain fails at the rendered element).
  // `.dropdown` is pinned on the parent per Pitfall 1's eager substitution.
  .box,
  .card,
  .dropdown,
  .modal-card-head,
  .panel {
    --bulma-shadow:
      0 0.5em 1em -0.125em hsl(221deg 14% 4% / 10%),
      0 0 0 1px hsl(221deg 14% 4% / 2%);
  }

  // Pitfall 11: pin --bulma-border-weak (footer / panel-item / dropdown
  // divider separators) and --bulma-card-header-shadow so sub-component
  // separators render. Interpolated from the Solarized scheme tint.
  .card,
  .dropdown,
  .panel {
    --bulma-border-weak: hsl(#{$scheme-h}, #{$scheme-s}, 93%);
  }

  .tabs {
    // Pitfall 11: the tab-row underline chains through --bulma-border.
    --bulma-border: hsl(#{$scheme-h}, #{$scheme-s}, 86%);

    // Pitfall 12: the active is-boxed tab's background chains through
    // --bulma-scheme-main and fails at the descendant; pin the cream
    // scheme-main literal so the ul's bottom border does not bleed through.
    --bulma-tabs-boxed-link-active-background-color: hsl(#{$scheme-h}, #{$scheme-s}, #{$scheme-main-l});
  }

  .card {
    --bulma-card-header-shadow: 0 0.125em 0.25em hsla(#{$scheme-h}, #{$scheme-s}, 4%, 10%);

    // Pitfall 13: --bulma-card-radius is Bulma's SCSS-default 0.75rem,
    // re-declared directly on `.card`; scope the override here so it wins.
    --bulma-card-radius: #{$radius};
  }

  // Pitfall 12: `.modal-card-{head,body,foot}` background chains through
  // --bulma-scheme-main{,-bis} and fails at the descendants; pin the cream
  // literals so the dark overlay does not bleed through.
  .modal {
    --bulma-modal-card-head-background-color: hsl(#{$scheme-h}, #{$scheme-s}, #{$scheme-main-l});
    --bulma-modal-card-body-background-color: hsl(#{$scheme-h}, #{$scheme-s}, #{$scheme-main-l});
    --bulma-modal-card-foot-background-color: hsl(#{$scheme-h}, #{$scheme-s}, 92%);
  }

  // Pitfall 13 (continued): round a background-styled `<figure>` in the
  // card-image slot (Bulma only rounds `<img>`), so gradient placeholders
  // stay clipped to the card radius.
  .card-image:first-child > figure {
    border-start-start-radius: var(--bulma-card-radius);
    border-start-end-radius: var(--bulma-card-radius);
  }

  .card-image:last-child > figure {
    border-end-start-radius: var(--bulma-card-radius);
    border-end-end-radius: var(--bulma-card-radius);
  }

  // Widen the active tab's underline from Bulma's 1px to 3px so it reads
  // as a clear accent under plain `.tabs`. Excludes `.is-toggle`.
  .tabs:not(.is-toggle) li.is-active a {
    border-bottom-width: 3px;
    margin-bottom: -3px;
  }

  // Bulma registers `--bulma-code` on :root as the danger/red colour, so
  // inline <code> reads as an error state. Repoint text + background into
  // the brand primary (blue) hue so <code> reads as part of the palette.
  code {
    --bulma-code: hsl(#{$primary-h}, #{$primary-s}, 25%);
    --bulma-code-background: hsl(#{$primary-h}, #{$primary-s}, 94%);
  }

  // --- Dark mode (native Solarized dark, driven by [data-theme="dark"]) ---
  // The provisional navbar toggle sets data-theme on :root; `&` here is :root
  // (the mixin is @include-d in :root), so this block compiles to
  // `:root[data-theme="dark"] …` — out-specifying and out-ordering both the
  // light pins above and Bulma's own [data-theme=dark] block. Overriding the
  // scheme/text H/S/L flips the whole canvas (same mechanism the light pins
  // use); every light-only literal pin above then gets a dark counterpart so
  // borders / shadows / modal / code don't stay light on the dark ground.
  &[data-theme="dark"] {
    --bulma-scheme-h: #{$scheme-dark-h};
    --bulma-scheme-s: #{$scheme-dark-s};
    --bulma-scheme-main-l: #{$scheme-dark-main-l};
    --bulma-text-h: #{$text-dark-h};
    --bulma-text-s: #{$text-dark-s};
    --bulma-text-l: #{$text-dark-l};
    --bulma-text-strong-l: #{$text-dark-strong-l};

    // keep the base02 nav chrome (re-pin so Bulma's dark palette can't shift it)
    --bulma-dark-h: #{$dark-h};
    --bulma-dark-s: #{$dark-s};
    --bulma-dark-l: #{$dark-l};
    --bulma-dark-invert-l: #{$dark-invert-l};

    .box,
    .card,
    .dropdown,
    .modal-card-head,
    .panel {
      --bulma-shadow:
        0 0.5em 1em -0.125em hsl(0deg 0% 0% / 40%),
        0 0 0 1px hsl(0deg 0% 100% / 10%);
    }

    .card,
    .dropdown,
    .panel {
      --bulma-border-weak: hsl(#{$scheme-dark-h}, #{$scheme-dark-s}, 21%);
    }

    .tabs {
      --bulma-border: hsl(#{$scheme-dark-h}, #{$scheme-dark-s}, 24%);
      --bulma-tabs-boxed-link-active-background-color: hsl(#{$scheme-dark-h}, #{$scheme-dark-s}, #{$scheme-dark-main-l});
    }

    .card {
      --bulma-card-header-shadow: 0 0.125em 0.25em hsl(0deg 0% 0% / 30%);
    }

    .modal {
      --bulma-modal-card-head-background-color: hsl(#{$scheme-dark-h}, #{$scheme-dark-s}, #{$scheme-dark-main-l});
      --bulma-modal-card-body-background-color: hsl(#{$scheme-dark-h}, #{$scheme-dark-s}, #{$scheme-dark-main-l});
      --bulma-modal-card-foot-background-color: hsl(#{$scheme-dark-h}, #{$scheme-dark-s}, 14%);
    }

    code {
      --bulma-code: hsl(#{$primary-h}, #{$primary-s}, 78%);
      --bulma-code-background: hsl(#{$primary-h}, #{$primary-s}, 16%);
    }

    // `.message.is-dark`: Bulma draws the header from `dark-l` (our base02,
    // 14%) and the body from the generic `background-l`, which in dark mode is
    // also ~14% with the same dark h/s — so header and body collapse to one
    // colour. Give the body a distinct, lighter *muted* teal panel so the two
    // read apart (Pitfall 15: bare Sass vars in the real `background-color`).
    .message.is-dark .message-body {
      background-color: hsl($scheme-dark-h, $scheme-dark-s, 20%);
    }
  }
}