/* ==========================================================================
   Variables — design tokens (spec §58)
   Skeleton colours are corporate (navy / white / red). Art colours live in the
   artwork files only; CSS never paints gradients with them.
   ========================================================================== */

:root {
  /* BRAND COLOR SYSTEM — ITSG orange is the one accent for attention, selection, operation,
     progress and change. Ratio: navy 55% / white 35% / orange 10%. Never a section background,
     never body copy, no large orange gradients, no unrelated reds. */
  --brand-orange: #EA5514;
  --brand-orange-dark: #C9470E;
  --brand-orange-light: #FF7A32;
  --navy: #071C2C;
  --navy-light: #0E2A40;
  --white: #FFFFFF;
  --off-white: #F7F7F5;
  --gray: #D8DDE1;
  --text: #10202E;

  --color-brand: var(--brand-orange);             /* lines, dots, brushes, large numbers, orange on navy */
  --color-brand-dark: var(--brand-orange-dark);   /* planes and brush fills under white type (4.8:1) */
  --color-brand-light: var(--brand-orange-light);
  --color-brand-text: var(--brand-orange-dark);   /* small orange type on white / off-white (4.8:1) */

  --color-navy: var(--navy-light);
  --color-navy-deep: var(--navy);
  --color-footer: var(--navy);
  --color-blue: #0e3a6c;
  --color-brush-blue: #1d63c6;   /* the blue of the Orange × Blue × Navy brush */
  --color-white: var(--white);
  --color-ink: var(--text);
  --color-hero-ink: var(--navy);
  --color-text: var(--text);
  --color-muted: #56626c;
  --color-ground: var(--off-white);
  --color-line: var(--gray);
  --color-outline: #b4bbc1;
  --color-word: #d8dee4;         /* CHALLENGE × SPEED */
  --color-required: #a8420f;     /* errors / unconfirmed facts: the orange family, darkened for text (6:1) */

  /* Mincho aligned with the recruit site (itsg-recruit-v4 --serif). */
  --font-serif: "Noto Serif CJK JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Klee One", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;

  --container-wide: 1700px;
  --container-main: 1240px;
  --container-text: 760px;
  --gutter: clamp(20px, 5.7vw, 110px);
  --space-section: clamp(88px, 9.4vw, 180px);
  --space-block: clamp(48px, 5.2vw, 100px);

  --header-h: 80px;
  --adminbar-h: 0px;
  --focus: var(--color-brand-dark);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-draw: cubic-bezier(.77, 0, .18, 1);

  /* Motion system (UI redesign §14): micro / normal / large, one base easing (--ease-out). */
  --dur-micro: 240ms;
  --dur-normal: 400ms;
  --dur-large: 600ms;

  /* Brush shapes, used as masks: a line drawn with uneven pressure, and a paint patch with
     dry-brush gaps and loose bristle marks at its end. */
  --mask-brush-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6.1C11 4.9 23 5.6 36 4.7 55 3.5 72 5.2 92 4.3c21-.9 39 .2 58-.6 16-.7 33-.1 50-.9v2.6c-10 .6-21 .4-33 1.1-18 1.1-37 .3-56 1.2-20 1-39-.3-59 .8-15 .8-30 .2-45 1.1-8 .5-13-.2-19 .3z'/%3E%3Cpath fill-opacity='.55' d='M24 8.6c30-.8 60-.2 92-.9 20-.4 38 .1 60-.6v.7c-22 .9-40 .5-60 1-32 .7-62 .1-92 .6z'/%3E%3C/svg%3E");
  --mask-brush-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M2 9C28 5 61 8 96 5c44-4 90 1 134-2 26-2 48 1 66 3l3 9c-5 5 2 11-2 17 5 6-1 12 2 19-20 5-45 1-72 4-44 4-86-1-130 2-36 3-66-1-96 1C-1 51 4 43 1 35c4-8-2-14 3-21zM40 20c40-1 80 0 120-1v1.2c-40 1-80 .6-120 1.1zM120 41c36-.6 72 .2 110-.8v1c-38 1-74 .4-110 1z'/%3E%3Cpath d='M232 1c22 0 44-1 68 1v1.6c-24 .6-46 .2-68 .4zM250 56c16 0 32 .4 48-.4v1.5c-16 .7-32 .5-48 .2z'/%3E%3C/svg%3E");
}

body.admin-bar { --adminbar-h: 32px; }

@media (max-width: 782px) {
  body.admin-bar { --adminbar-h: 46px; }
}

@media (max-width: 1023px) {
  :root { --header-h: 64px; }
}

/* Desktop header: 120 of 1920 (a little more air than the mock's 110, UI redesign §1). */
@media (min-width: 1024px) {
  :root { --header-h: calc(120 * 100vw / 1920); }
}