/* KYA Group — site configuration (design tokens)
 *
 * The one place every colour, font, size, spacing, radius, shadow, image ratio and breakpoint is defined.
 * Every page loads this file first; site.css (shared layout and components) and the page stylesheets only
 * use these variables. The table with purposes and sources is docs/尺寸配置表.md; change a value here and
 * update that table in the same commit.
 *
 * Standard: Tailwind CSS v4. Variable names follow Tailwind's theme namespaces (--color-*, --font-*, --text-*,
 * --font-weight-*, --spacing, --container-*, --radius-*, --shadow-*, --blur-*, --aspect-*, --breakpoint-*),
 * so the site can move to Tailwind without renaming. Sizes use rem (1rem = 16px) on Tailwind's 0.25rem step.
 *
 * Mobile first, as in Tailwind: the values in :root are for phones; the two blocks at the end override them
 * from md (48rem = 768px, tablets) and lg (64rem = 1024px, desktops).
 */

:root {
  /* ---------- Breakpoints. CSS cannot read variables inside @media, so every stylesheet writes these
     two queries literally: (width >= 48rem) and (width >= 64rem). ---------- */
  --breakpoint-md: 48rem;             /* 768px: tablets */
  --breakpoint-lg: 64rem;             /* 1024px: desktops */

  /* ---------- Colour (final, from the KYA VI manual) ---------- */
  --color-background: #ffffff;
  --color-background-alt: #ebeae9;    /* article pages' closing band (the homepage Journal band is white since U503) */
  --color-panel: #edf4f5;             /* tinted bands and panels */
  --color-surface: #ffffff;           /* cards */

  --color-ink: #231f20;               /* headings */
  --color-text: #3a3637;              /* body text */
  --color-muted: #5f5c5b;             /* secondary text */
  --color-faint: #686767;             /* labels, captions: 4.5:1 on both white and --color-background-alt */
  --color-line: #dedcda;
  --color-line-strong: #cfccc9;
  --color-line-input: #878482;        /* form field and choice borders: 3.7:1 on white (WCAG 1.4.11 needs 3:1) */

  --color-accent: #3f7e8e;            /* buttons and links; passes contrast with white text */
  --color-accent-hover: #336b79;
  --color-accent-display: #5197a8;    /* large headline accent */
  --color-accent-line: #bcd7dd;
  --color-on-accent: #ffffff;

  --color-footer: #042843;
  --color-footer-text: #ffffff;
  --color-footer-muted: #a8bdcc;
  --color-footer-line: #1c4866;

  /* Homepage Douyin band (decided U436–U457): the navy ground's fade to white, derived from --color-footer in OKLCH
     (hue 246 → 236, eased ends; generated by design/douyin/build_home_placement.py, which writes the same colours into
     douyin-ring.js, U446, U448); the photo card's slab (U448); the NZ$4M+ badge; the route list's dots */
  --gradient-douyin-ground: linear-gradient(to bottom, #042843 0.0%, #042843 2.5%, #052944 5.0%, #052a46 7.5%, #062c48 10.0%, #082e4a 12.5%, #0a314d 15.0%, #0c3451 17.5%, #0f3856 20.0%, #123d5b 22.5%, #154160 25.0%, #194665 27.5%, #1d4b6a 30.0%, #205070 32.5%, #245576 35.0%, #295b7c 37.5%, #2d6182 40.0%, #326788 42.5%, #376d8f 45.0%, #3c7395 47.5%, #42799b 50.0%, #487fa1 52.5%, #4e85a7 55.0%, #548cad 57.5%, #5b92b3 60.0%, #6399b9 62.5%, #6ba0bf 65.0%, #75a7c5 67.5%, #7eaecb 70.0%, #89b5d0 72.5%, #94bdd6 75.0%, #9fc5dc 77.5%, #accde2 80.0%, #b9d5e7 82.5%, #c6dded 85.0%, #d3e4f1 87.5%, #e1edf6 90.0%, #eef5fa 92.5%, #f8fbfd 95.0%, #fdfefe 97.5%, #ffffff 100.0%);
  --color-slab-light: #3a5074;        /* lit top-left of the slab's bevel */
  --color-slab-mid: #101d31;
  --color-slab-dark: #0a1322;         /* the slab's shaded side and its deepest edge layer */
  --color-slab-edge: #2c4163;         /* the slab's front edge layer */
  --color-badge: #fff8ec;             /* NZ$4M+ badge; --color-accent-hover on it is 5.65:1 */
  --color-badge-ring: rgb(242 197 114 / .35);
  --color-route-dot: #e6a93a;         /* the dots before Global overseas warehouse, trunk line, bonded warehouse */

  --color-error: #b91c1c;             /* form errors: Tailwind red-700, 6.5:1 on white */
  --color-backdrop: #04284399;
  --color-focus: #3f7e8e;             /* keyboard focus ring: 4.6:1 on white, 4.1:1 on the tinted bands */
  --color-glass: #ffffffcc;           /* floating header pills, as on tasteskill.dev */

  /* ---------- Shadow and blur ---------- */
  --shadow-glass: 0 6px 18px -6px rgb(15 15 15 / .18), 0 1px 2px rgb(0 0 0 / .04);
  --shadow-float: 0 24px 48px -18px rgb(4 40 67 / .25), 0 2px 6px rgb(4 40 67 / .06);   /* hero images */
  --shadow-menu: 0 10px 25px rgb(4 40 67 / .08);
  --shadow-slab: 0 22px 32px rgb(0 0 0 / .45);              /* Douyin band photo card, at rest (drop-shadow) */
  --shadow-slab-lift: 0 46px 70px rgb(0 0 0 / .6);           /* the same card lifted on hover */
  --shadow-slab-bevel: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .08);   /* its lit rim */
  --blur-md: 12px;                    /* glass header (Tailwind blur-md) */
  --blur-pill: 6px;                   /* the Content Seeding pill on the Douyin ring (mock value, pending client review) */

  /* ---------- Motion ---------- */
  --ease-lift: cubic-bezier(0, 0, .2, 1);   /* the Douyin photo card's hover lift, copied from tasteskill.dev after U447;
                                              kept by the client (U578) */
  --dur-lift: 500ms;

  /* ---------- Font ---------- */
  --font-sans: Manrope, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ---------- Type scale: one role per kind of text, each with its own line height, letter spacing and
     weight (Tailwind's --text-<name>--line-height convention). Pages pick a role; they never set a size.
     One scale for the whole site (U537, Q55 option A): the h3 and lead are the build skill's default sizes
     (kya-website-builder references/typography.md §3) at every width; the homepage hero (display), the page
     titles, the section headlines (U545, U546: one step smaller on phones, as GOV.UK and Material do) and the
     uppercase labels (10 / 12px) change with the screen. ---------- */
  --text-display: clamp(2.25rem, 10.25vw, 2.5rem);   /* page headline (h1): 36–40px */
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: -0.03em;
  --text-display--font-weight: 600;

  --text-headline: 1.75rem;           /* section headline (h2): 28px on phones, 36px from tablets up (U546) */
  --text-page-title: 2rem;            /* page titles (h1) of every page but the homepage: 32 / 44 / 44px (U526, U527, U537; phones U545) */
  --text-article-title: 1.875rem;     /* Journal article titles (h1), one step below page titles: 30 / 40px (U614, Q70 "try it") */
  --text-display-s: clamp(2rem, 1.5vw + 1.5rem, 3rem);   /* the build skill's one-step-down h1 size (typography.md §3, §4): 32–48px; used where a page title steps down (U533) */
  --text-headline--line-height: 1.1;
  --text-headline--letter-spacing: -0.025em;
  --text-headline--font-weight: 500;

  --text-title-lg: 1.75rem;           /* service headline, article sub-heading, dialog title (h3): 28px */
  --text-title-lg--line-height: 1.1;
  --text-title-lg--letter-spacing: -0.025em;
  --text-title-lg--font-weight: 500;

  --text-title: 1.25rem;              /* card and item titles: 20px */
  --text-title--line-height: 1.3;
  --text-title--letter-spacing: -0.025em;
  --text-title--font-weight: 500;

  --text-lead: 1.125rem;              /* lead paragraph under a headline: 18px */
  --text-lead--line-height: 1.75rem;  /* 28px */
  --text-lead--letter-spacing: -0.01em;

  --text-prose: 1.125rem;             /* article body text: 18px (Stripe, Vercel: 18/28) */
  --text-prose--line-height: 1.75rem; /* 28px */

  --text-body: 1rem;                  /* 16px */
  --text-body--line-height: 1.625;    /* 26px */

  --text-small: 0.875rem;             /* secondary text, lists, grouped links: 14px */
  --text-small--line-height: 1.5;

  --text-label: 0.625rem;             /* uppercase eyebrows, tags, numbers: 10px */
  --text-label--line-height: 1.625;
  --text-label--letter-spacing: 0.15em;
  --text-label--font-weight: 600;

  --text-caption: 0.75rem;            /* notes and fine print: 12px */
  --text-caption--line-height: 1.5;

  /* ---------- Spacing: Tailwind's single step; every gap is calc(var(--spacing) * n) ---------- */
  --spacing: 0.25rem;                 /* 4px */

  /* ---------- Layout ---------- */
  --container-page: 77.5rem;          /* content width: 1240px */
  --container-measure: 35rem;         /* longest line for body text: 560px, ~75 characters at 16px */
  --container-lead: 40rem;            /* longest line for lead text: 640px, ~75 characters at 18px */
  --container-prose: 42rem;           /* article text column: 672px (Tailwind container-2xl), ~70 characters at 18px */
  --gutter: 1.25rem;                  /* space left and right of the content: 20px */
  --section-space: 4rem;              /* above and below every section: 64px */
  --block-gap: 2.5rem;                /* section heading block → its content: 40px */
  --row-gap: 4rem;                    /* between rows inside a section: 64px */
  --column-gap: 2rem;                 /* between side-by-side columns: 32px */
  --grid-gap: 1rem;                   /* between cards: 16px */

  /* ---------- Rhythm inside a block ---------- */
  --gap-label: 1.25rem;               /* label → headline: 20px */
  --gap-heading: 1.25rem;             /* headline → text under it: 20px */
  --gap-text: 1.5rem;                 /* paragraph → list or next block: 24px */
  --gap-list: 0.75rem;                /* between list items: 12px */
  --gap-action: 2rem;                 /* text → button or link: 32px */

  /* ---------- Components ---------- */
  --card-pad: 1.5rem;                 /* large cards and panels: 24px */
  --card-pad-sm: 1.5rem;              /* compact cards (article cards; top and bottom of skill cards): 24px */
  --button-height: 3.5rem;            /* main button: 56px */
  --button-pad-x: 1.75rem;            /* 28px */
  --input-height: 3rem;               /* text fields: 48px */
  --input-pad-x: 1rem;                /* 16px */
  --radius-lg: 0.5rem;                /* small buttons, inner steps: 8px */
  --radius-xl: 0.75rem;               /* header pills, dialogs: 12px */
  --radius-2xl: 1rem;                 /* cards, panels, images, main buttons: 16px */
  --radius-full: 9999px;              /* avatars, step numbers */
  --icon-size: 1.25rem;               /* social and UI icons: 20px */
  --avatar-size: 3rem;                /* author photo in a byline: 48px */
  --avatar-size-lg: 4.5rem;           /* was the author box photo, 72px; unused since the author box went (U500); Q49 */
  --z-raised: 10;                     /* stacking order: text above the hero images */
  --z-dropdown: 100;                  /* phone menu panel (inside the header) */
  --z-nav: 300;                       /* header */
  --z-modal: 400;                     /* preview switch in the bottom-left corner (preview build only) */
  --z-top: 600;                       /* skip link, always on top */

  /* ---------- Header, hero and footer ---------- */
  --header-height: 5.5rem;            /* 88px */
  --logo-height: 2rem;                /* 32px: above the VI minimum width of 30mm */
  --logo-height-footer: 5.5rem;       /* 88px */
  --header-pill-height: 2.75rem;      /* desktop floating pills: 44px, as on tasteskill.dev */
  --nav-link-height: 2.25rem;         /* 36px */
  --nav-link-pad-x: 0.875rem;         /* 14px */
  --hero-space-top: 3rem;             /* header → page headline: 48px */

  /* ---------- Images: every image box has a fixed ratio, so no picture can set its own height ---------- */
  --aspect-video: 16 / 9;             /* hero images, article cards, article cover */
  --aspect-feature: 4 / 3;            /* image beside text (service panel) */
  --aspect-square: 1 / 1;             /* avatars */
}

/* md: tablets, 768px and wider */
@media (width >= 48rem) {
  :root {
    --text-display: clamp(2.5rem, 4.4vw, 4rem);   /* 40–64px: about 63px at 1440 wide */
    --text-headline: 2.25rem;         /* 36px from tablets up */
    --text-page-title: 2.75rem;       /* 44px from tablets up */
    --text-article-title: 2.5rem;     /* 40px from tablets up (U614) */
    --text-label: 0.75rem;            /* 12px */
    --gutter: 2rem;                   /* 32px */
    --section-space: 5rem;            /* 80px */
    --block-gap: 3.5rem;              /* 56px */
    --row-gap: 5rem;                  /* 80px */
    --column-gap: 3rem;               /* 48px */
    --grid-gap: 1.5rem;               /* 24px */
    --card-pad: 2rem;                 /* 32px */
  }
}

/* lg: desktops, 1024px and wider */
@media (width >= 64rem) {
  :root {
    --gutter: 3rem;                   /* 48px */
    --section-space: 7rem;            /* 112px */
    --block-gap: 4rem;                /* 64px */
    --row-gap: 6rem;                  /* 96px */
    --column-gap: 5rem;               /* 80px */
  }
}