/* ==========================================================================
   Design tokens
   Ported from the WordPress (Blocksy) build so both sites share one system.
   Source: wp-content/uploads/blocksy/css/global.css
   ========================================================================== */

:root {
  /* --- Palette -------------------------------------------------------- */
  --color-1: #3a5da5; /* deep blue  - links, button hover */
  --color-2: #2c66b1; /* primary    - buttons, headings, credentials bar */
  --color-3: #355575; /* slate      - body text */
  --color-4: #102136; /* navy       - deep contrast */
  --color-5: #e7ebee; /* border     - hairlines, ghost-button hover */
  --color-6: #f3f5f7; /* grey tint */
  --color-7: #f7fafd; /* blue tint  - hero panel, card surfaces */
  --color-8: #ffffff;
  --color-9: #d9ffe0; /* mint       - portrait halo accent */

  /* Interaction shade. color-1 (#3a5da5) was the hover, but it sits only
     1.11:1 from the primary — an imperceptible change, so buttons gave no
     feedback. This is a genuine step darker (1.33:1) and lifts white-on-it
     from AA to AAA. color-1 stays in the palette for link text. */
  --primary-dark: #24548f;

  /* Star/rating amber. The previous #f5a623 measured 2.03:1 on white, under
     the 3:1 WCAG 1.4.11 needs for meaningful graphics. */
  --accent-warm: #c47f00;

  /* Semantic aliases: prefer these in component CSS. */
  --primary: var(--color-2);
  --primary-hover: var(--primary-dark);
  --text: var(--color-3);
  --heading: var(--color-2);
  --border: var(--color-5);
  --surface: var(--color-8);
  --surface-tint: var(--color-7);
  --accent-mint: var(--color-9);
  /* Mint at text weight. color-9 is a tint for fills — the portrait halo, the
     open-now dot on navy — and measures 1.04:1 on the hero panel, so it can
     never carry a letterform. This is the same hue taken down to where it
     reads: 4.63:1 on the hero tint, 4.85:1 on white, clearing AA for normal
     text and not just for the display sizes it is used at today. */
  --accent-mint-deep: #12815e;

  /* --- Typography ----------------------------------------------------- */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  /* Korean pages swap this in via [lang="ko"] (see korean.css, which also
     ships the Pretendard webfont). Pretendard leads; the system faces behind
     it are what renders during the swap and if the font fails to load, in
     descending order of how much they look like Pretendard. */
  --font-stack-kr: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NotoSansKR",
    "Malgun Gothic", "malgungothic", "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";

  --font-size: 1rem;
  --line-height: 1.65;

  /* Fluid heading scale. Floors are the WP mobile sizes, ceilings the
     desktop ones, so the ends match the reference exactly. */
  --h-hero: clamp(1.875rem, 1.07rem + 4.02vw, 3.125rem); /* 30 -> 50 */
  --h1: clamp(1.75rem, 1.35rem + 2.01vw, 2.5rem); /* 28 -> 40 */
  --h2: clamp(1.5625rem, 1.16rem + 2.01vw, 2.1875rem); /* 25 -> 35 */
  --h3: clamp(1.375rem, 1.1rem + 1.34vw, 1.875rem); /* 22 -> 30 */
  --h4: clamp(1.125rem, 0.98rem + 0.67vw, 1.375rem); /* 18 -> 22 */

  /* --- Buttons -------------------------------------------------------- */
  /* Set in sentence case. Uppercase reads as shouting at this weight, costs
     the word-shape that makes a label scannable, and is the single loudest
     signal of an older design system. */
  --button-font-size: 1rem;
  --button-font-weight: 600;
  --button-text-transform: none;
  --button-min-height: 62px;
  /* Compact variant for dense contexts like the sticky action bar. */
  --button-min-height-compact: 3.25rem;
  --button-padding: 5px 35px;
  /* Squared on mobile, where cards and panels run flush to the edges and a
     pill reads as out of place; the reference design's pill returns on
     desktop, where content is inset. One token drives every button. */
  --button-radius: 12px;

  /* Glass, not plastic.
     A top-to-bottom sheen with a lit top edge models a domed, moulded
     surface — the aqua-button look. Glass is the opposite: the face is flat
     and even, and all the modelling happens at the edge, where a hairline
     rim catches light. Depth comes from one soft, wide, low-opacity shadow
     rather than a tight dark one, so the button separates from the page
     without appearing to bulge off it.

     The rim is a border rather than an inset shadow so it survives on the
     translucent variants, where an inner shadow would tint the fill. */
  --button-rim: rgb(255 255 255 / 0.22);
  --button-shadow: 0 1px 2px rgb(16 33 54 / 0.07),
    0 8px 20px -12px rgb(16 33 54 / 0.55);
  --button-shadow-hover: 0 1px 2px rgb(16 33 54 / 0.09),
    0 14px 28px -14px rgb(16 33 54 / 0.6);
  --button-shadow-pressed: 0 1px 2px rgb(16 33 54 / 0.09);
  --button-shadow-quiet: 0 1px 2px rgb(16 33 54 / 0.05),
    0 6px 16px -12px rgb(16 33 54 / 0.4);
  --button-shadow-quiet-hover: 0 1px 2px rgb(16 33 54 / 0.07),
    0 10px 22px -14px rgb(16 33 54 / 0.5);

  /* The frosted material used by the translucent variants. */
  --glass-blur: blur(16px) saturate(1.6);

  /* --- Forms ---------------------------------------------------------- */
  --field-height: 50px;
  --field-radius: 12px;
  --field-border-width: 2px;

  /* --- Layout --------------------------------------------------------- */
  --container-max: 1290px;
  --container-narrow: 750px;
  --container-edge: 90vw;

  /* Vertical rhythm between sections. */
  --section-gap: 60px;
  --content-gap: 1.5em;

  /* Height of the fixed site header; sections that sit at the top of a page
     offset by this so they aren't covered. */
  --header-height: 63px;
  /* Rough height of the header notice strip, added to the above on pages that
     carry one. Both are first-paint fallbacks only — nav.js measures the real
     stack and publishes it as --header-h. Erring high by a few pixels is the
     safe direction: it opens a brief gap rather than putting the top of the
     page under the bar. */
  --notice-height: 3rem;

  /* --- Shape ---------------------------------------------------------- */
  --radius-panel: 40px; /* hero panel, cards, feature rows */
  --radius-pill: 60px; /* pill headings */

  /* --- Motion --------------------------------------------------------- */
  --transition: 0.2s ease;
}

@media only screen and (max-width: 999px) {
  :root {
    --section-gap: 50px;
    --container-edge: 88vw;

    /* A corner radius reads relative to the box it rounds. 40px on a 1150px
       desktop panel is a soft corner; on a 330px phone panel it eats an
       eighth of the width, which pulls the visible edge in from the text
       column beside it and stops the two lining up. This holds the same
       apparent softness at phone widths. */
    --radius-panel: 20px;

    /* Buttons match the sticky bar's. Two sizes of the same component on one
       screen — 62px tall with 35px of side padding in the page, 52px with
       16px in the bar — read as two different components. The in-page one
       was the outlier: 62px was a desktop figure carried down unchanged. */
    --button-min-height: 3.25rem;
    --button-padding: 0.5rem 1.5rem;
  }
}

@media only screen and (min-width: 1000px) {
  :root {
    --header-height: 100px;
    /* One line instead of two at this width. */
    --notice-height: 2.75rem;
    --button-radius: 150px;
  }
}