/* Design tokens. Scoped to .pdv2 / .pdv2-header / .pdv2-footer on purpose - this site is shared by several brands, so these must not become global. Do not move them to :root. */

.pdv2,
.pdv2-header,
.pdv2-footer {
  /* ===== Palette ===== */
  --pdv2-primary-600: #6B46D9;      /* Primary CTA, selected state, key links */
  --pdv2-primary-700: #552DB3;      /* Hover, active, dark headings */
  --pdv2-primary-100: #F3EEFF;      /* Light purple background, selection, focus ring */
  --pdv2-accent-yellow: #FFD44D;    /* Small highlights, in-content CTA (not for long text) */
  --pdv2-secondary-teal: #28B5A9;   /* My schedule, member-only actions */
  --pdv2-gray-200: #F1F2F6;         /* Disabled / light background */
  --pdv2-gray-400: #C8CDD6;         /* Borders, dividers */
  --pdv2-bg-soft: #FAF8FD;          /* Soft section / form background */
  --pdv2-text-primary: #2F2942;     /* Primary text */
  --pdv2-text-secondary: #686274;   /* Secondary and helper text */
  --pdv2-white: #FFFFFF;            /* Base background, text on dark buttons */

  /* ===== Danger / error (V18 D2, 2026-09-18) =====
     Source: V18 root 01_FINAL_DECISIONS.md section 8 "D2 Danger Token".
     Dr.PD only - that document says explicitly it does NOT authorise the same
     change on Dr.MVP, MENTOR or FreeGoing. These tokens are scoped to .pdv2 /
     .pdv2-header / .pdv2-footer, and those classes appear only on Dr.PD views,
     so the other brands cannot pick them up.
     Same document: an error must carry BOTH text and aria-invalid - colour alone
     is not allowed. These tokens supply the colour half only. */
  --pdv2-danger: #BD2854;           /* Error text / border / icon */
  --pdv2-danger-bg: #FFF5F8;        /* Error tint background */
  --pdv2-danger-hover: #9D1C44;     /* Action hover on an error-state control */
  --pdv2-focus-ring: 3px solid #572BD8;  /* Focus outline, used with offset 3px */
  --pdv2-focus-offset: 3px;

  /* ===== Font stack ===== */
  --pdv2-font-sans: "Noto Sans TC", Inter, "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* ===== Typography - Desktop (>= 1200px, base values) ===== */
  /* Font weights (shared across breakpoints) */
  --pdv2-fw-display: 700;
  --pdv2-fw-h1: 700;
  --pdv2-fw-h2: 600;
  --pdv2-fw-h3: 600;
  --pdv2-fw-h4: 600;
  --pdv2-fw-body-lg: 400;
  --pdv2-fw-body: 400;
  --pdv2-fw-small: 400;
  --pdv2-fw-caption: 400;
  --pdv2-fw-button: 600;

  /* Font size / line height (px; overridden per breakpoint below) */
  --pdv2-fs-display: 44px;
  --pdv2-lh-display: 56px;
  --pdv2-fs-h1: 36px;
  --pdv2-lh-h1: 48px;
  --pdv2-fs-h2: 30px;
  --pdv2-lh-h2: 42px;
  --pdv2-fs-h3: 24px;
  --pdv2-lh-h3: 34px;
  --pdv2-fs-h4: 20px;
  --pdv2-lh-h4: 30px;
  --pdv2-fs-body-lg: 18px;
  --pdv2-lh-body-lg: 30px;
  --pdv2-fs-body: 16px;
  --pdv2-lh-body: 27px;
  --pdv2-fs-small: 14px;
  --pdv2-lh-small: 22px;
  --pdv2-fs-caption: 13px;
  --pdv2-lh-caption: 20px;
  --pdv2-fs-button: 16px;
  --pdv2-lh-button: 24px;

  /* ===== Breakpoints (reference values; the media queries are below) ===== */
  /* Desktop: >= 1200px, max content width 1280px, gutter 40px */
  /* Tablet: 768px - 1199px, gutter 24px */
  /* Mobile: 320px - 767px, gutter 16px */
  --pdv2-container-max: 1280px;
  --pdv2-gutter: 40px;

  /* ===== Spacing (8px base) ===== */
  --pdv2-space-8: 8px;
  --pdv2-space-16: 16px;
  --pdv2-space-24: 24px;
  --pdv2-space-32: 32px;
  --pdv2-space-40: 40px;
  --pdv2-space-48: 48px;
  --pdv2-space-64: 64px;
  --pdv2-space-80: 80px;
  --pdv2-space-96: 96px;

  /* ===== Radius ===== */
  --pdv2-radius-sm: 8px;
  --pdv2-radius-control: 12px;
  --pdv2-radius-card: 16px;
  --pdv2-radius-lg: 24px;
  --pdv2-radius-pill: 999px;

  /* ===== Shadow ===== */
  /* Light shadow. Only for sticky header, dropdown, drawer, modal,
     overlays and highlighted cards - not for ordinary cards or large areas. */
  --pdv2-shadow-sm: 0 1px 2px rgba(47, 41, 66, 0.08);
  --pdv2-shadow-md: 0 4px 12px rgba(47, 41, 66, 0.12);
  --pdv2-shadow-lg: 0 8px 24px rgba(47, 41, 66, 0.16);
}

/* Tablet: 768px - 1199px, gutter 24px */
@media (max-width: 1199px) {
  .pdv2,
  .pdv2-header,
  .pdv2-footer {
    --pdv2-fs-display: 40px;
    --pdv2-lh-display: 52px;
    --pdv2-fs-h1: 34px;
    --pdv2-lh-h1: 46px;
    --pdv2-fs-h2: 28px;
    --pdv2-lh-h2: 40px;
    --pdv2-fs-h3: 22px;
    --pdv2-lh-h3: 32px;
    --pdv2-fs-h4: 20px;
    --pdv2-lh-h4: 30px;
    --pdv2-fs-body-lg: 17px;
    --pdv2-lh-body-lg: 28px;
    --pdv2-fs-body: 16px;
    --pdv2-lh-body: 27px;
    --pdv2-fs-small: 14px;
    --pdv2-lh-small: 22px;
    --pdv2-fs-caption: 13px;
    --pdv2-lh-caption: 20px;
    --pdv2-fs-button: 15px;
    --pdv2-lh-button: 22px;

    --pdv2-gutter: 24px;
  }
}

/* Mobile: 320px - 767px, gutter 16px */
@media (max-width: 767px) {
  .pdv2,
  .pdv2-header,
  .pdv2-footer {
    --pdv2-fs-display: 34px;
    --pdv2-lh-display: 44px;
    --pdv2-fs-h1: 30px;
    --pdv2-lh-h1: 40px;
    --pdv2-fs-h2: 26px;
    --pdv2-lh-h2: 36px;
    --pdv2-fs-h3: 20px;
    --pdv2-lh-h3: 30px;
    --pdv2-fs-h4: 18px;
    --pdv2-lh-h4: 28px;
    --pdv2-fs-body-lg: 17px;
    --pdv2-lh-body-lg: 28px;
    /* Hard requirement: mobile body text stays at 16px, never smaller */
    --pdv2-fs-body: 16px;
    --pdv2-lh-body: 27px;
    --pdv2-fs-small: 14px;
    --pdv2-lh-small: 22px;
    /* Hard requirement: footer legal text min 13px; caption is the smallest size site-wide */
    --pdv2-fs-caption: 13px;
    --pdv2-lh-caption: 20px;
    --pdv2-fs-button: 15px;
    --pdv2-lh-button: 22px;

    --pdv2-gutter: 16px;
  }
}