/* Design tokens. Every color, size, spacing, radius, shadow and motion value used by the site. */

:root {
  /* Color */
  --green-900: #06301D;
  --green-800: #075C38;
  --green-700: #047B4A;
  --green-600: #0F9A5F;
  --green-500: #22B676;
  --green-400: #52CC92;
  --green-300: #8CE0B5;
  --green-200: #BFEED5;
  --green-100: #E2F7EB;
  --teal-400:  #5CC9D6;
  --wood-600: #8A6549;
  /* the services tree's painting: bark in light, half light and shade, and six leaf greens from deep to sunlit */
  --bark-700: #4A3426;
  --bark-600: #5E4330;
  --bark-500: #7A5638;
  --bark-300: #A47D57;
  --leaf-0: #183F20;
  --leaf-1: #22562A;
  --leaf-2: #2E7135;
  --leaf-3: #3F8A3A;
  --leaf-4: #5DA144;
  --leaf-5: #86BC52;
  --ink-900: #111927;
  --ink-700: #3A4352;
  --ink-500: #6B7483;
  --ink-300: #A4ABB7;
  --ink-200: #D5D9E0;
  --ink-100: #EBEEF2;
  --white: #FFFFFF;
  --bg-soft: #F5F7F9;
  --sage-200: #D0D6E1;

  --color-text: var(--ink-900);
  --color-text-2: var(--ink-700);
  --color-text-3: var(--ink-500);
  --color-accent: var(--green-600);
  --color-accent-hover: var(--green-700);
  --color-line: var(--ink-100);
  --color-on-dark: #FFFFFF;
  --color-on-dark-2: rgba(255, 255, 255, 0.72);
  --color-on-dark-3: rgba(255, 255, 255, 0.5);

  --grad-accent: linear-gradient(135deg, #52CC92 0%, #5CC9D6 100%);
  --grad-dark: linear-gradient(180deg, #050706 0%, #0B0F0D 100%);

  /* Translucent header and menu */
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-blur: 16px;

  /* Tile */
  --tile-bg: var(--bg-soft);
  --tile-pad: 48px;

  /* Shadow */
  --shadow-card: 0 12px 40px rgba(6, 48, 29, 0.08);
  --shadow-float: 0 24px 64px rgba(6, 48, 29, 0.14);
  --shadow-tile: 18px 18px 48px rgba(6, 48, 29, 0.10), -14px -14px 40px rgba(255, 255, 255, 0.95);
  /* sub pages: a tile of the page's own grey, lit from above (a pale top edge and sheen) and resting on a soft shadow */
  --shadow-tile-lit: 0 1px 2px rgba(6, 48, 29, 0.05), 0 22px 44px -14px rgba(6, 48, 29, 0.16), 0 -10px 28px -6px rgba(255, 255, 255, 0.9),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(6, 48, 29, 0.05);
  --tile-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0) 70%);
  --shadow-button: 0 2px 12px rgba(17, 25, 39, 0.12);

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-regular: 400;
  --fw-light: 300;
  --fw-thin: 200;
  --fw-hair: 100;

  --fs-display: 60px; --lh-display: 1.2;  --ls-display: -0.025em;
  --fs-h1: 48px;      --lh-h1: 1.25;      --ls-h1: -0.025em;
  --fs-h2: 36px;      --lh-h2: 1.3;       --ls-h2: -0.02em;
  --fs-h3: 28px;      --lh-h3: 1.4;       --ls-h3: -0.015em;
  --fs-lead: 20px;    --lh-lead: 1.6;     --ls-lead: -0.01em;
  --fs-body: 17px;    --lh-body: 1.7;     --ls-body: -0.01em;
  --fs-small: 14px;   --lh-small: 1.5;
  --fs-label: 16px;   --lh-label: 1.4;
  --fs-caption: 14px; --ls-caption: 0.6em;
  --fs-page-en: 88px;
  --fs-num: 64px;     --lh-num: 1;        --ls-num: -0.03em;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 200px;

  --section-y: var(--sp-11);
  --section-y-tall: var(--sp-12);
  --gap-label-title: var(--sp-4);
  --gap-title-lead: var(--sp-5);
  --gap-lead-btn: var(--sp-7);
  --gap-text-visual: var(--sp-9);
  --page-top: var(--sp-11);
  --gap-card: var(--sp-5);
  --gap-num-label: var(--sp-3);

  /* Width */
  --container-narrow: 760px;
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;
  --header-h: 72px;

  /* Radius */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Motion (reveal values measured on toss.im) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-text: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-heading: cubic-bezier(0.37, 0.31, 0, 1);
  --ease-sheet: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.7s;
  --dur-slow: 1.2s;
  --dur-bg: 0.8s;
  --dur-reveal: 0.8s;
  --dur-rise: 0.8s;
  --reveal-y: 24px;
  --reveal-blur: 16px;
  --reveal-stagger: 0.08s;
  --rise-y: 120px;
  --focus-blur: 6px;
  --focus-dim: 0.15;
  --focus-stagger: 0.1s;
  --dur-hover: 0.5s;
  --dur-line: 1.2s;
  --dur-unveil: 1.4s;
  --dur-draw: 1.2s;
  --dur-leave: 0.4s;
  --dur-sheet: 0.5s;
  --dur-strip: 0.5s;
  --logo-word-at: 1.1s;
  --unveil-scale: 1.3;
  --parallax-scale: 1.1;
  --parallax-shift: 4;
  --marquee-dur: 40s;
  --marquee-boost: 5;
  --dot-size: 20px;
  --dot-right: var(--sp-2);
  --top-size: var(--dot-size);
  --top-hit: 44px;
  --hero-inset: var(--sp-5);
  --tree-w: 200px;
  --tree-art: 200px;
  /* How far the tree lane may reach into the page margin */
  --tree-reach: 56px;
  --stat-text: 340px;
  /* Partner logos: each fits a box this size, keeping its shape */
  --logo-w: 180px;
  --logo-h: 40px;
  --stat-bar-h: 24px;
  /* Notice banner: centred in the space left of the call's widest line as it shows on screen (the lead, about
     480px), as wide as fits there with some room on both sides, at most 360px */
  --lead-w: 480px;
  --notice-space: calc((100vw - var(--lead-w)) / 2);
  --notice-w: clamp(200px, calc(var(--notice-space) - 48px), 360px);
  --showpiece-h: 420px;
  /* Hero: the part of the screen the photo card shows before scrolling (it starts at 100% minus this) */
  --hero-peek: 18svh;

  /* Control */
  --btn-h: 56px;
  --btn-px: var(--sp-6);
}

@media (max-width: 1024px) and (orientation: portrait) {
  :root {
    --hero-peek: 36svh;
  }
}

@media (min-width: 1280px) {
  :root {
    --tree-w: 260px;
    --tree-art: 270px;
  }
}

@media (min-width: 1440px) {
  :root {
    --tree-w: 310px;
    --tree-art: 390px;
  }
}

@media (min-width: 1600px) {
  :root {
    --tree-w: 320px;
    --tree-art: 450px;
    --tree-reach: 220px;
  }
}

@media (min-width: 1920px) {
  :root {
    --tree-art: 500px;
    --tree-reach: 260px;
  }
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 52px;
    --fs-page-en: 64px;
    --fs-h1: 40px;
    --fs-h2: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-display: 36px; --lh-display: 1.25;
    --fs-page-en: 44px;
    --stat-text: 170px;
    --logo-w: 132px;
    --logo-h: 32px;
    --stat-bar-h: 18px;
    --fs-h1: 30px;
    --fs-h2: 26px;
    --fs-h3: 22px;
    --fs-lead: 17px;
    --fs-body: 16px;
    --fs-label: 14px;
    --fs-num: 44px;

    --section-y: var(--sp-8);
    --section-y-tall: var(--sp-9);
    --gap-label-title: var(--sp-3);
    --gap-title-lead: var(--sp-4);
    --gap-lead-btn: var(--sp-6);
    --gap-text-visual: var(--sp-8);
    --page-top: var(--sp-9);
    --gap-card: var(--sp-4);
    --gap-num-label: var(--sp-2);
    --tile-pad: var(--sp-5);

    --gutter: 20px;
    --header-h: 60px;

    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 24px;

    --marquee-dur: 28s;
    --hero-inset: var(--sp-3);

    --btn-h: 52px;
  }
}