:root {
  /* =========================================================
     Color tokens — 南山設計系統規範 v2.0 / Color 顏色
     Figma: HTMvhOsxEpJySqAUK4YQBr, node 76:6984
     Raw palette tokens mirror the design-system naming/value.
     Component CSS should prefer the semantic aliases below.
     ========================================================= */

  /* Primary Color */
  --ds-primary-light: #549fd2;      /* Primary-light */
  --ds-primary-bright: #0099e0;     /* Primary-bright */
  --ds-primary-default: #006fbc;    /* Primary-default */
  --ds-primary-logo2: #0062b1;      /* Primary-logo2 */
  --ds-primary-dark: #004f85;       /* Primary-dark */

  /* Neutral Color */
  --ds-neutral-white: #ffffff;      /* Neutral-white */
  --ds-neutral-offwhite: #fcfcfc;   /* Neutral-OffWhite */
  --ds-neutral-palest: #f6f6f6;    /* Neutral-palest */
  --ds-neutral-paler: #eeeeee;      /* Neutral-paler */
  --ds-neutral-pale: #cacaca;       /* Neutral-pale */
  --ds-neutral-lightest: #8d8d8d;  /* Neutral-lightest */
  --ds-neutral-lighter: #696969;    /* Neutral-lighter */
  --ds-neutral-light: #555555;      /* Neutral-light */
  --ds-neutral-default: #3c3c3c;    /* Neutral-default */
  --ds-neutral-dark: #242424;       /* Neutral-dark */
  --ds-neutral-black: #000000;      /* Neutral-black */
  --ds-text-static-medium: #757575; /* Text/Static/Medium semantic token */

  /* Positive Color */
  --ds-positive-lighter: #b9e8d5;
  --ds-positive-light: #67cda5;
  --ds-positive-default: #00a069;
  --ds-positive-dark: #148056;
  --ds-positive-darker: #0c4c33;

  /* Warning Color */
  --ds-warning-lighter: #fbd1c8;
  --ds-warning-light: #f69d88;
  --ds-warning-default: #ec684a;
  --ds-warning-dark: #ac4d37;
  --ds-warning-darker: #662d21;

  /* Danger Color */
  --ds-danger-lighter: #f7b0b6;
  --ds-danger-light: #ee5461;
  --ds-danger-default: #e60013;
  --ds-danger-dark: #a3000d;
  --ds-danger-darker: #610008;

  /* App Background Color */
  --ds-bg-fido-grey: #fcfcfc;
  --ds-bg-pale-grey: #fafafa;
  --ds-bg-white: #ffffff;
  --ds-bg-pale-blue: #f8fbfd;
  --ds-bg-light-blue: #f6fcff;
  --ds-bg-selection: #e6f6fd;
  --ds-bg-alpha: rgba(19, 26, 52, 0.6);
  --ds-bg-alpha-strong: rgba(19, 26, 52, 0.9);

  /* Secondary Color — default tones used by this website */
  --ds-secondary-yellow-default: #fbc72b;
  --ds-secondary-green-default: #67a300;
  --ds-secondary-pink-default: #ff538a;
  --ds-secondary-orange-default: #f96800;
  --ds-secondary-gold-default: #ffdf35;

  /* Semantic aliases — interactive / common UI */
  --action-primary-bg: var(--ds-primary-default);
  --action-primary-text: var(--ds-neutral-white);
  --action-primary-hover-bg: var(--ds-primary-light);
  --action-primary-pressed-bg: var(--ds-primary-dark);
  --action-primary-border: var(--ds-primary-default);

  /* Destructive actions */
  --action-danger-bg: var(--ds-danger-default);
  --action-danger-text: var(--ds-neutral-white);
  --action-danger-hover-bg: var(--ds-danger-light);
  --action-danger-pressed-bg: var(--ds-danger-dark);
  --action-danger-border: var(--ds-danger-default);

  --action-link-text: var(--ds-primary-default);
  --action-focus-color: var(--ds-primary-dark);
  --action-icon-hover-bg: #ebf5fc; /* icon-only hover surface used by the current website */
  --action-disabled-bg: var(--ds-neutral-pale);
  --action-disabled-text: var(--ds-neutral-lightest);
  --action-disabled-border: var(--ds-neutral-pale);

  /* Semantic aliases — form controls / Figma Text Field Basic (2163:80768) */
  --form-control-bg: var(--ds-neutral-white);
  --form-control-bg-disabled: var(--ds-neutral-paler);
  --form-control-border: var(--ds-neutral-pale);
  --form-control-border-active: var(--ds-primary-default);
  --form-control-border-danger: var(--ds-danger-default);
  --form-control-text: var(--ds-neutral-default);
  --form-control-placeholder: var(--ds-text-static-medium);
  --form-control-disabled-text: var(--ds-text-static-medium);
  --form-control-helper-text: var(--ds-neutral-lighter);
  --form-control-danger-text: var(--ds-danger-default);
  --form-control-radius: 8px;
  --form-control-height: 48px;

  /* Semantic aliases — Checkbox / Figma checkbox states (2163:80883) */
  --checkbox-size: 24px;
  --checkbox-bg: var(--ds-neutral-white);
  --checkbox-border: var(--ds-primary-default);
  --checkbox-checked-bg: var(--ds-primary-default);
  --checkbox-danger-border: var(--ds-danger-default);
  --checkbox-disabled-bg: var(--ds-neutral-paler);
  --checkbox-disabled-border: var(--ds-neutral-pale);
  --checkbox-positive-bg: var(--ds-positive-default);
  --checkbox-focus: var(--ds-primary-bright);

  /* Semantic aliases — course/session statuses.
     Status background tints are component-level semantic tokens. */
  --status-positive-text: var(--ds-positive-default);
  --status-positive-bg: #ddf4ea;
  --status-muted-text: var(--ds-neutral-lighter);
  --status-muted-bg: var(--ds-neutral-paler);
  --status-warning-text: var(--ds-warning-default);
  --status-warning-bg: #f6e2df;
  --status-danger-text: var(--ds-danger-default);
  --status-danger-bg: #fce6e7;
  --status-closed-text: var(--ds-neutral-lighter);
  --status-closed-bg: var(--ds-neutral-pale);
  --status-registered-text: var(--ds-primary-default);
  --status-registered-bg: var(--ds-bg-selection);

  /* Website semantic surfaces */
  --surface-secondary-orange-soft: rgba(255, 205, 170, 0.2);
  --surface-danger-soft: #fcdcd5;
  --surface-info-soft: #e0f3fc;
  --surface-positive-soft: var(--status-positive-bg);
  --surface-positive-consent: #ecfff7;

  --radius-control: 6px;
  --radius-card: 12px;
  --radius-panel: 24px;
  --shadow-card: 0 0 8px rgba(0,0,0,.25);
  --shadow-header: 0 4px 15px rgba(19,26,52,.05);
  --container: 1224px;
  --gutter: 20px;
  --section-space: 80px;
  --font-sans: "Nanshan Web", "Nanshan System", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Typography scale — Figma 7-Typography_Desktop, node 2616:30831.
     The design-system tab is “Desktop (大小網 RWD)”, so this is the website scale for both large and small web layouts. */
  --type-heading-1-size: 64px; --type-heading-1-line: 80px; --type-heading-1-weight: 600;
  --type-heading-2-size: 48px; --type-heading-2-line: 56px; --type-heading-2-weight: 600;
  --type-heading-3-size: 40px; --type-heading-3-line: 48px; --type-heading-3-weight: 600;
  --type-heading-4-size: 32px; --type-heading-4-line: 48px; --type-heading-4-weight: 600;
  --type-heading-5-size: 24px; --type-heading-5-line: 36px; --type-heading-5-weight: 600;
  --type-heading-6-size: 20px; --type-heading-6-line: 32px; --type-heading-6-weight: 600;
  --type-heading-7-size: 18px; --type-heading-7-line: 28px; --type-heading-7-weight: var(--font-weight-medium);
  --type-card-title-1-size: 18px; --type-card-title-1-line: 28px; --type-card-title-1-weight: 600;
  --type-card-title-2-size: 16px; --type-card-title-2-line: 24px; --type-card-title-2-weight: 600;
  --type-card-title-3-size: 14px; --type-card-title-3-line: 20px; --type-card-title-3-weight: 600;
  --type-body-1-size: 16px; --type-body-1-line: 24px; --type-body-1-weight: 400;
  --type-body-1-medium-weight: var(--font-weight-medium); --type-body-1-semibold-weight: var(--font-weight-semibold);
  --type-body-2-size: 14px; --type-body-2-line: 20px; --type-body-2-weight: 400;
  --type-body-2-medium-weight: var(--font-weight-medium); --type-body-2-semibold-weight: var(--font-weight-semibold);
  --type-button-l-size: 18px; --type-button-l-line: 20px; --type-button-l-weight: 600;
  --type-button-m-size: 16px; --type-button-m-line: 18px; --type-button-m-weight: 600;
  --type-button-s-size: 14px; --type-button-s-line: 16px; --type-button-s-weight: 600;
  --type-caption-1-size: 14px; --type-caption-1-line: 20px; --type-caption-1-weight: 600;
  --type-caption-2-size: 14px; --type-caption-2-line: 20px; --type-caption-2-weight: 600;
  --type-caption-3-size: 12px; --type-caption-3-line: 16px; --type-caption-3-weight: 600;
}