/* 班務助手 AI — Landing Page Design Tokens
   Single source of truth. Never hard-code hex values in component CSS.
   Light is default; Dark values ship as overrides under prefers-color-scheme.
   Contrast: every text token below meets WCAG AA on its documented surfaces
   (>=4.5:1 for text <24px, >=3:1 for >=24px). Disabled controls are exempt. */

:root {
  color-scheme: light;

  /* ---------- Semantic color: surfaces ---------- */
  --color-surface-page:        #FBF8F3; /* page background, warm paper */
  --color-surface-alt:         #F5EFE4; /* alternating section band */
  --color-surface-raised:      #FFFFFF; /* cards, information panels */
  --color-surface-sunken:      #F3EDE1; /* notice strips, table headers */
  --color-surface-media:       #DCDAD4; /* image placeholder / media well */
  --color-surface-inverse:     #1F5D53; /* CTA band, key-statement band */
  --color-surface-success-soft:#F2F6F4;
  --color-surface-warning-soft:#F3EDE1;
  --color-surface-danger-soft: #F6E8E5;

  /* ---------- Semantic color: text ---------- */
  --color-text-primary:    #23292B; /* headings + body */
  --color-text-secondary:  #5B6360; /* supporting body copy */
  --color-text-tertiary:   #636B68; /* captions, meta, footnotes */
  --color-text-number:     #6F6858; /* ordinal numbers + eyebrow labels <=22px */
  --color-text-number-lg:  #8F8674; /* same role at >=24px only (3:1) */
  --color-text-on-inverse: #FFFFFF;
  --color-text-on-inverse-muted: #CBDCD7;
  --color-text-success:    #1F5D53;
  --color-text-warning:    #8A6015;
  --color-text-danger:     #8F2F26;
  --color-text-disabled:   #9AA39F; /* placeholders + disabled labels */

  /* ---------- Semantic color: action ---------- */
  --color-action-primary:        #1F5D53;
  --color-action-primary-hover:  #164A42;
  --color-action-primary-active: #103A34;
  --color-action-primary-fg:     #FFFFFF;
  --color-action-secondary-fg:   #1F5D53;
  --color-action-secondary-border:#1F5D53;
  --color-action-secondary-hover-bg:#EEF3F1;
  --color-action-disabled-bg:    #C9D3D0;
  --color-action-disabled-fg:    #FFFFFF;
  --color-action-on-inverse-bg:  #FFFFFF; /* primary CTA on the green band */
  --color-action-on-inverse-fg:  #1F5D53;
  --color-focus-ring:            #1F5D53;

  /* ---------- Semantic color: status ---------- */
  --color-status-ai:          #1F5D53; /* AI handled */
  --color-status-waiting:     #C08A2E; /* waiting for a human / pending */
  --color-status-waiting-text:#8A6015;
  --color-status-assigned:    #3F8A6F; /* human assigned */
  --color-status-inprogress:  #4E5754; /* human working on it */
  --color-status-resolved:    #3F8A6F;
  --color-status-needshelp:   #A63A2F;
  --color-status-risk:        #A63A2F;
  --color-status-stale:       #C08A2E; /* data past freshness window */
  --color-status-unavailable: #4E5754; /* external system down */
  --color-status-danger-text: #8F2F26;

  /* ---------- Border ---------- */
  --color-border-default: #E8E2D6; /* cards, dividers */
  --color-border-subtle:  #EFE9DD; /* inner table rows */
  --color-border-strong:  #CFC9BB; /* form controls, segmented control */
  --color-border-ink:     #23292B; /* editorial top/bottom rule on lists */
  --color-border-success: #D6E2DD;
  --color-border-warning: #EDE0C9;
  --color-border-danger:  #EBD9D5;
  --border-width-hairline: 1px;
  --border-width-control:  1.5px;
  --border-width-accent:   3px;  /* left accent bar on notice strips */
  --border-width-rule:     2px;  /* section rule above process steps */

  /* ---------- Typography ---------- */
  --font-sans: "Noto Sans TC", system-ui, -apple-system, "PingFang TC",
               "Microsoft JhengHei", sans-serif;
  --font-mono-label: "Inter", "Noto Sans TC", sans-serif; /* numerals, codes */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  /* Noto Sans TC 900 is NOT used in this direction. */

  /* Scale — desktop / tablet / mobile. line-height unitless. */
  --font-size-display:      48px; --line-height-display: 1.30;
  --font-size-display-md:   40px;
  --font-size-display-sm:   29px; --line-height-display-sm: 1.36;
  --font-size-section:      30px; --line-height-section: 1.40;
  --font-size-section-md:   26px;
  --font-size-section-sm:   22px;
  --font-size-subsection:   24px; /* step titles in §06 */
  --font-size-card-title:   21px; --line-height-card-title: 1.50;
  --font-size-card-title-md:19px;
  --font-size-card-title-sm:17px;
  --font-size-list-title:   19px; /* editorial row titles (boundary list) */
  --font-size-body-lg:      17px; --line-height-body-lg: 1.90;
  --font-size-body-lg-md:   16px;
  --font-size-body:         14.5px; --line-height-body: 1.85;
  --font-size-body-sm:      13.5px; --line-height-body-sm: 1.80;
  --font-size-caption:      12.5px; --line-height-caption: 1.75;
  --font-size-label:        13px;   --line-height-label: 1.40;
  --font-size-code-tag:     10.5px; --letter-spacing-code-tag: .08em;
  --font-size-number-lg:    38px; /* §06 step ordinals */
  --font-size-number:       26px; /* desktop pain-point ordinals */
  --font-size-number-md:    22px;
  --font-size-number-sm:    18px;
  --letter-spacing-eyebrow: .10em; /* STEP 1 / PHASE 1 */
  --letter-spacing-frame:   .14em;
  /* em, not ch: ch is the width of the "0" glyph, which for a CJK font is roughly
     half the width of a full-width ideograph — using it here would cap zh-Hant
     paragraphs at about half the intended measure. 1 CJK character ~= 1em. */
  --measure-body: 40em;  /* max line length for zh-Hant body copy */
  --measure-lead: 34em;  /* hero lead paragraph */

  /* ---------- Spacing (8-point, 4px half-step) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  /* Section vertical padding per breakpoint */
  --section-pad-y-desktop: var(--space-14);
  --section-pad-y-tablet:  var(--space-10);
  --section-pad-y-mobile:  28px;
  /* Section horizontal padding per breakpoint */
  --section-pad-x-desktop: var(--space-14);
  --section-pad-x-tablet:  var(--space-8);
  --section-pad-x-mobile:  var(--space-4);

  /* ---------- Container & grid ---------- */
  --container-max: 1440px;   /* design canvas; content is edge-padded, not centred-narrow */
  --container-content-max: 1200px; /* optional inner cap for very wide screens */
  --grid-columns-desktop: 12;
  --grid-columns-tablet:  8;
  --grid-columns-mobile:  4;
  --grid-gutter-desktop: var(--space-6);
  --grid-gutter-tablet:  var(--space-5);
  --grid-gutter-mobile:  var(--space-3);
  --hero-split-desktop: 1.06fr 1fr; /* copy column / media column */

  /* ---------- Radius (only two, plus pill for chips) ---------- */
  --radius-surface: 4px; /* cards, panels, media wells, notices */
  --radius-control: 3px; /* buttons, inputs, segmented control */
  --radius-round:   999px; /* numbered step bullets only */

  /* ---------- Shadow (overlays only — never on static cards) ---------- */
  --shadow-none: none;
  --shadow-overlay: 0 8px 24px rgba(35, 41, 43, .14);  /* dropdown, mobile nav sheet */
  --shadow-widget:  0 12px 32px rgba(35, 41, 43, .18); /* website chat widget */

  /* ---------- Breakpoints (also mirrored in JS constants) ---------- */
  --bp-mobile-max:  767px;
  --bp-tablet-min:  768px;
  --bp-tablet-max:  1279px;
  --bp-desktop-min: 1280px;
  /* Design canvases: 390 (mobile), 1024 (tablet), 1440 (desktop) */

  /* ---------- Motion ---------- */
  --duration-instant: 80ms;   /* segmented control fill */
  --duration-fast:    160ms;  /* hover, focus */
  --duration-base:    240ms;  /* accordion open/close */
  --duration-reveal:  500ms;  /* scroll reveal fade + rise */
  --easing-standard: cubic-bezier(.2, 0, .2, 1);
  --easing-out:      ease-out;
  --reveal-offset-y: 12px;

  /* ---------- Z-index ---------- */
  --z-base:        0;
  --z-media:       1;
  --z-sticky-header: 100;
  --z-mobile-nav-backdrop: 200;
  --z-mobile-nav-sheet:    210;
  --z-dropdown:    300;
  --z-widget-launcher: 400;
  --z-widget-panel:    410;
  --z-toast:       500;
  --z-modal:       600;
}

/* Dark-mode override disabled for now: the approved "Direction B" prototype was only ever
   drawn/reviewed in its light warm-paper form (design-reference/官網 Landing Page 1B.dc.html
   has no dark frame), so this page must render identically regardless of the visitor's OS
   color-scheme setting until a dark variant goes through its own design review. Values kept
   here, commented out, so that review can start from these rather than from scratch.
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-surface-page:   #191A18;
    --color-surface-alt:    #20211F;
    --color-surface-raised: #26282A;
    --color-surface-sunken: #2A2B26;
    --color-surface-media:  #2C2E2B;
    --color-surface-inverse:#123C36;
    --color-surface-success-soft:#1B2A26;
    --color-surface-warning-soft:#2A2419;
    --color-surface-danger-soft: #2C1E1B;

    --color-text-primary:   #F2EFE9;
    --color-text-secondary: #B4BAB6;
    --color-text-tertiary:  #9AA39F;
    --color-text-number:    #A79D89;
    --color-text-number-lg: #8F8674;
    --color-text-success:   #5FB394;
    --color-text-warning:   #D6A14A;
    --color-text-danger:    #E88C80;
    --color-text-disabled:  #6E756F;

    --color-action-primary:       #3E9184;
    --color-action-primary-hover: #4FA396;
    --color-action-primary-active:#357F73;
    --color-action-primary-fg:    #0F1211;
    --color-action-secondary-fg:  #6FB8AA;
    --color-action-secondary-border:#6FB8AA;
    --color-action-secondary-hover-bg:#1E2B28;
    --color-action-disabled-bg:   #3A403D;
    --color-action-disabled-fg:   #8E9793;
    --color-focus-ring:           #6FB8AA;

    --color-status-ai:          #5FB394;
    --color-status-waiting:     #D6A14A;
    --color-status-waiting-text:#D6A14A;
    --color-status-assigned:    #5FB394;
    --color-status-inprogress:  #B4BAB6;
    --color-status-resolved:    #5FB394;
    --color-status-needshelp:   #D2685B;
    --color-status-risk:        #D2685B;
    --color-status-stale:       #D6A14A;
    --color-status-unavailable: #B4BAB6;
    --color-status-danger-text: #E88C80;

    --color-border-default: #33362F;
    --color-border-subtle:  #2B2E28;
    --color-border-strong:  #494D45;
    --color-border-ink:     #F2EFE9;
    --color-border-success: #2E4A42;
    --color-border-warning: #4A3F27;
    --color-border-danger:  #4A2F2A;
  }
}
*/

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-reveal:  0ms;
    --reveal-offset-y:  0px;
  }
}