/* tokens.css — the single source of truth for design values.
   Change color, type scale, spacing, radius, shadow and layout here. */

:root {
  /* ---- BACKUP: forest-green palette (pre-blue rebrand, restore to revert) ----
     --color-primary: #1f6a43;      action green
     --color-blue-mist: #edf4ee;    pale green wash
     --color-primary-deep: #1a4a31; dark green — header top row, footer, hover
     --color-primary-tint: #d6e7dc;
     --color-line: #dde5df;
     --color-focus: #1f6a43;
     --header-nav: #2b5c41;         mid green nav bar
     --dg-bg: #0c2818;
     --hero-accent: #8fceb0;
     scrim-hero base rgba(9, 26, 17, a);  dot texture rgba(31, 106, 67, a)
     shadow tint rgba(18, 52, 33, a);
     bg-placeholder: #d7e8de / #eef4ef / #f7fbf8
     dg__cta-btn #2e7d54 / hover #3a9968;  services-panel base #f4f8f5
     hero__panel base rgba(12, 30, 20, a)                                       */

  /* ---- Color: core (white / near-black / official blue) ---- */
  --color-paper: #ffffff;
  --color-ink: #141719;
  --color-primary: #1e4588;      /* action blue — links, buttons, accents on white */
  --color-blue-mist: #eef2f9;    /* pale blue wash */
  --color-slate: #586460;

  /* ---- Color: derived ---- */
  --color-primary-deep: #16366b; /* dark blue — header top row, footer, button hover */
  --color-primary-tint: #d3e0f2;
  --color-line: #dbe1ee;
  --color-focus: #1e4588;
  --header-nav: #274f96;         /* mid blue — the nav bar row */

  /* ---- Color: semantic (use sparingly) ---- */
  --color-success: #1e7a46;
  --color-warning: #8a5a00;
  --color-danger: #b3261e;
  --color-danger-bg: #fbecec;

  /* ---- Typography ---- */
  --font-en: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mm: "Pyidaungsu", "Noto Sans Myanmar", "Myanmar Text", "Padauk", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas,
    "Liberation Mono", Menlo, monospace;

  /* type scale (fluid where it helps) */
  --step--1: 0.8125rem;   /* 13px  labels, meta */
  --step-0: 1.0625rem;    /* 17px  body */
  --step-1: 1.1875rem;    /* 19px  lead, card titles */
  --step-2: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);   /* h3 */
  --step-3: clamp(1.6rem, 1.15rem + 2vw, 2.15rem);     /* h2 */
  --step-4: clamp(2.1rem, 1.3rem + 3.8vw, 3.75rem);    /* hero h1 (Latin) */
  --step-hero-mm: clamp(1.55rem, 1.05rem + 2.5vw, 2.55rem); /* hero h1 (Myanmar) */

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Shadow: soft, green-tinted ---- */
  --shadow-sm: 0 1px 2px rgba(20, 23, 25, 0.04), 0 2px 6px rgba(18, 33, 66, 0.06);
  --shadow-md: 0 2px 6px rgba(20, 23, 25, 0.05), 0 12px 28px rgba(18, 33, 66, 0.09);
  --shadow-lg: 0 8px 20px rgba(20, 23, 25, 0.06), 0 26px 50px rgba(18, 33, 66, 0.11);

  /* ---- Background imagery ----
     Set these to url("../img/NAME.jpg") once real assets exist; until then the
     placeholder wash below stands in. --bg-scrim keeps text legible over an image. */
  --img-hero: url("../img/hero.jpg");
  --img-band: none;
  --img-site: none;
  --dg-bg: #0b1f3d;

  /* Hero runs full-bleed over a photo with a dark green scrim; text sits on dark.
     Scrim eased ~20% so the photo reads brighter — keep text-shadow on hero copy. */
  --scrim-hero: linear-gradient(
      102deg,
      rgba(8, 19, 38, 0.7) 0%,
      rgba(8, 19, 38, 0.46) 46%,
      rgba(8, 19, 38, 0.34) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(8, 19, 38, 0.34) 0%,
      rgba(8, 19, 38, 0.18) 36%,
      rgba(8, 19, 38, 0.54) 100%
    );
  --hero-ink: #ffffff;
  --hero-ink-soft: rgba(255, 255, 255, 0.84);
  --hero-ink-faint: rgba(255, 255, 255, 0.64);
  --hero-accent: #9fc1ec;
  --hero-hairline: rgba(255, 255, 255, 0.5);
  --bg-placeholder: radial-gradient(
      90% 120% at 100% 0%,
      #d9e3f4,
      transparent 55%
    ),
    linear-gradient(160deg, #eef2f9 0%, #f8fafd 45%, var(--color-paper) 100%);
  --bg-scrim: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.68),
    rgba(255, 255, 255, 0.82)
  );

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 72px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.2s;
}