/**
 * AUTO1491 Website V2 — Unified Hybrid Design System
 * Phase 2B — Infrastructure stylesheet: tokens + unused primitive components.
 *
 * Values sourced verbatim from AUTO1491_Website_V2_Design_Tokens.txt and
 * AUTO1491_Website_V2_Component_Inventory.txt (Phase 1, human-approved).
 * See /home/auto/AI Work/AUTO1491_Website_V2_Phase1_Master_Design_System.md
 * for full rationale.
 *
 * PHASE 2B RULE (do not violate in a later edit without a new phase sign-off):
 *   - This file may define --a1491-* custom properties and .a1491-* prefixed
 *     classes ONLY.
 *   - It must NOT contain any bare element selector (body, h1, a, .button, …)
 *     or target any Flatsome/Elementor/WooCommerce class. Tokens are defined
 *     here; they are not yet applied anywhere in live markup.
 *   - No .a1491-* class defined below is referenced by any Production page
 *     as of Phase 2B. That wiring is Phase 2C's job, page 778 only.
 */

:root {
  /* ---------------------------------------------------------------
     COLORS — PRIMITIVES
     --------------------------------------------------------------- */
  --a1491-color-navy-900: #0A1220;
  --a1491-color-navy-800: #0F172A;
  --a1491-color-navy-700: #132540;
  --a1491-color-navy-600: #1E293B;
  --a1491-color-navy-400: #94A3B8;
  --a1491-color-gray-100: #F8FAFC;
  --a1491-color-gray-200: #E2E8F0;
  --a1491-color-gray-50:  #F1F5F9;
  --a1491-color-gold-500: #E8C46A;
  --a1491-color-green-500: #22C55E;
  --a1491-color-amber-500: #F59E0B;
  --a1491-color-red-500:  #EF4444;

  /* COLORS — SEMANTIC (reference primitives above; never hardcode raw hex
     in component rules below — reference these instead) */
  --a1491-color-bg-deep:        var(--a1491-color-navy-900);
  --a1491-color-bg-surface:     var(--a1491-color-navy-800);
  --a1491-color-bg-elevated:    var(--a1491-color-navy-700);
  --a1491-color-bg-light:       var(--a1491-color-gray-100);
  --a1491-color-brand-gold:     var(--a1491-color-gold-500);
  --a1491-color-text-on-dark:   var(--a1491-color-gray-50);
  --a1491-color-text-on-light:  var(--a1491-color-navy-800);
  --a1491-color-text-secondary: var(--a1491-color-navy-400);
  --a1491-color-border-dark:    var(--a1491-color-navy-600);
  --a1491-color-border-light:   var(--a1491-color-gray-200);
  --a1491-color-success:        var(--a1491-color-green-500);
  --a1491-color-warning:        var(--a1491-color-amber-500);
  --a1491-color-error:          var(--a1491-color-red-500);
  --a1491-color-focus-ring:     var(--a1491-color-brand-gold);

  /* ---------------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     NOTE: these are reference font-stack tokens only. No @font-face,
     no Google Fonts @import/<link>, no font file is loaded by this
     file. Declaring --a1491-font-chinese does not load Noto Sans TC —
     it falls through to PingFang TC / Microsoft JhengHei / OS sans-serif
     today, identical to current site behavior. Real web-font delivery
     is a later, separate, performance-reviewed phase (see Phase 2A
     Risk R12 and Design Tokens §Typography note).
     --------------------------------------------------------------- */
  --a1491-font-chinese:      "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --a1491-font-latin:        "Inter", -apple-system, "Segoe UI", sans-serif;
  --a1491-font-mono:         "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  /* RESTRICTED USE: Reading Mode article H1 ONLY. Do not apply elsewhere. */
  --a1491-font-serif-accent: "Noto Serif TC", "Source Serif 4", serif;

  /* TYPOGRAPHY — SCALE (desktop values; mobile values are the second
     number in each pair from the token spec — applied via the same
     custom property under a max-width media query further below) */
  --a1491-text-h1-size:            40px;
  --a1491-text-h1-weight:          700;
  --a1491-text-h1-line-height:     1.25;
  --a1491-text-h1-reading-size:    44px;
  --a1491-text-h1-reading-weight:  700;
  --a1491-text-h1-reading-line-height: 1.3;
  --a1491-text-h2-size:            30px;
  --a1491-text-h2-weight:          600;
  --a1491-text-h2-line-height:     1.3;
  --a1491-text-h3-size:            22px;
  --a1491-text-h3-weight:          600;
  --a1491-text-h3-line-height:     1.4;
  --a1491-text-h4-size:            18px;
  --a1491-text-h4-weight:          500;
  --a1491-text-h4-line-height:     1.4;
  --a1491-text-body-large-size:    18px;
  --a1491-text-body-large-line-height: 1.7;
  --a1491-text-body-size:          16px;
  --a1491-text-body-line-height:   1.6;
  --a1491-text-body-small-size:    14px;
  --a1491-text-body-small-line-height: 1.55;
  --a1491-text-caption-size:       13px;
  --a1491-text-caption-letter-spacing: 0.01em;
  --a1491-text-label-size:         13px;
  --a1491-text-label-weight:       500;
  --a1491-text-label-letter-spacing: 0.02em;
  --a1491-text-button-size:        15px;
  --a1491-text-button-weight:      600;
  --a1491-text-button-letter-spacing: 0.01em;
  --a1491-text-data-large-size:    28px;
  --a1491-text-data-large-weight:  600;
  --a1491-text-data-large-line-height: 1.2;
  --a1491-text-data-normal-size:   15px;
  --a1491-text-data-normal-weight: 500;
  --a1491-text-data-normal-line-height: 1.4;

  /* ---------------------------------------------------------------
     SPACING SCALE — one scale, used everywhere (System Mode + Reading Mode)
     --------------------------------------------------------------- */
  --a1491-space-4:   4px;
  --a1491-space-8:   8px;
  --a1491-space-12:  12px;
  --a1491-space-16:  16px;
  --a1491-space-24:  24px;
  --a1491-space-32:  32px;
  --a1491-space-48:  48px;
  --a1491-space-64:  64px;
  --a1491-space-96:  96px;
  --a1491-space-128: 128px;

  /* ---------------------------------------------------------------
     CONTAINERS
     --------------------------------------------------------------- */
  --a1491-container-marketing:  1280px;
  --a1491-container-reading:    760px;
  --a1491-container-data-wide:  1440px;

  /* ---------------------------------------------------------------
     BREAKPOINTS (reference values — CSS custom properties cannot be
     used inside @media conditions; these document the scale that the
     media queries in this file and future files must follow literally)
     --------------------------------------------------------------- */
  --a1491-bp-mobile-max:  639px;
  --a1491-bp-tablet-min:  640px;
  --a1491-bp-tablet-max:  1023px;
  --a1491-bp-desktop-min: 1024px;
  --a1491-bp-wide-min:    1440px;

  /* ---------------------------------------------------------------
     RADIUS
     --------------------------------------------------------------- */
  --a1491-radius-sm:   4px;
  --a1491-radius-md:   8px;
  --a1491-radius-lg:   16px;
  --a1491-radius-pill: 9999px;

  /* ---------------------------------------------------------------
     SHADOWS (max 2 levels; borders preferred as default)
     --------------------------------------------------------------- */
  --a1491-shadow-none: none;
  --a1491-shadow-sm:   0 1px 3px rgba(10, 18, 32, 0.12);
  --a1491-shadow-lg:   0 8px 24px rgba(10, 18, 32, 0.18);

  /* ---------------------------------------------------------------
     BORDERS
     --------------------------------------------------------------- */
  --a1491-border-width:        1px;
  --a1491-border-color-dark:   var(--a1491-color-border-dark);
  --a1491-border-color-light:  var(--a1491-color-border-light);
  --a1491-border-focus-width:  2px;
  --a1491-border-focus-offset: 2px;
  --a1491-border-focus-color:  var(--a1491-color-focus-ring);

  /* ---------------------------------------------------------------
     BUTTONS
     --------------------------------------------------------------- */
  --a1491-btn-radius:           var(--a1491-radius-md);
  --a1491-btn-height-desktop:   44px;
  --a1491-btn-height-mobile:    48px;
  --a1491-btn-min-tap:          44px;
  --a1491-btn-primary-bg:       var(--a1491-color-bg-surface);
  --a1491-btn-primary-text:     var(--a1491-color-text-on-dark);
  --a1491-btn-hero-bg:          var(--a1491-color-brand-gold);
  --a1491-btn-hero-text:        var(--a1491-color-navy-800);
  --a1491-btn-secondary-border: var(--a1491-color-bg-surface);
  --a1491-btn-danger-bg:        var(--a1491-color-error);

  /* ---------------------------------------------------------------
     SURFACES
     --------------------------------------------------------------- */
  --a1491-surface-deep-bg:              var(--a1491-color-bg-deep);
  --a1491-surface-primary-bg:           var(--a1491-color-bg-surface);
  --a1491-surface-elevated-bg:          var(--a1491-color-bg-elevated);
  --a1491-surface-card-radius:          var(--a1491-radius-md);
  --a1491-surface-card-radius-workflow: var(--a1491-radius-lg);
  --a1491-surface-card-padding-min:     var(--a1491-space-16);
  --a1491-surface-card-padding-max:     var(--a1491-space-32);

  /* ---------------------------------------------------------------
     Z-INDEX (minimal scale)
     --------------------------------------------------------------- */
  --a1491-z-dropdown:   10;
  --a1491-z-sticky-nav: 20;
  --a1491-z-overlay:    30;
  --a1491-z-toast:      40;

  /* ---------------------------------------------------------------
     MOTION
     --------------------------------------------------------------- */
  --a1491-motion-fast:      150ms;
  --a1491-motion-base:      250ms;
  --a1491-motion-signature: 700ms;
  --a1491-motion-ease:      cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---------------------------------------------------------------
     ILLUSTRATION LANGUAGE TOKENS
     --------------------------------------------------------------- */
  --a1491-illus-stroke-width:    2px;
  --a1491-illus-node-radius:     var(--a1491-radius-sm);
  --a1491-illus-line-active:     var(--a1491-color-brand-gold);
  --a1491-illus-line-structural: var(--a1491-color-border-dark);
}

/* Respect reduced-motion preference for the one signature animation token
   consumers (Phase 2C+) are expected to use. No animation is defined or
   triggered by this file itself — this is a reference rule only. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --a1491-motion-fast: 0ms;
    --a1491-motion-base: 0ms;
    --a1491-motion-signature: 0ms;
  }
}


/* =====================================================================
   PRIMITIVE COMPONENT CLASSES — DEFINED, NOT USED ANYWHERE IN PRODUCTION
   All classes below are a1491-prefixed. None override or redefine any
   Flatsome/Elementor/WooCommerce/WordPress-core class or bare element
   selector, per Phase 2B §12/§15. No current page references them.
   ===================================================================== */

/* [GLOBAL] Button — see Component Inventory: Purpose/Variants/Accessibility */
.a1491-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a1491-space-8);
  height: var(--a1491-btn-height-desktop);
  min-width: var(--a1491-btn-min-tap);
  padding: 0 var(--a1491-space-24);
  border-radius: var(--a1491-btn-radius);
  border: var(--a1491-border-width) solid transparent;
  font-family: var(--a1491-font-chinese);
  font-size: var(--a1491-text-button-size);
  font-weight: var(--a1491-text-button-weight);
  letter-spacing: var(--a1491-text-button-letter-spacing);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--a1491-motion-fast) var(--a1491-motion-ease),
              border-color var(--a1491-motion-fast) var(--a1491-motion-ease);
}
.a1491-btn:focus-visible {
  outline: var(--a1491-border-focus-width) solid var(--a1491-border-focus-color);
  outline-offset: var(--a1491-border-focus-offset);
}
.a1491-btn[disabled],
.a1491-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.a1491-btn--primary {
  background: var(--a1491-btn-primary-bg);
  color: var(--a1491-btn-primary-text);
}
.a1491-btn--hero {
  /* RESTRICTED: max 1 visible instance per view (Phase 1 Gold Policy) */
  background: var(--a1491-btn-hero-bg);
  color: var(--a1491-btn-hero-text);
}
.a1491-btn--secondary {
  background: transparent;
  border-color: var(--a1491-btn-secondary-border);
  color: var(--a1491-color-text-on-light);
}
.a1491-btn--tertiary {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  color: var(--a1491-color-text-on-light);
}
.a1491-btn--danger {
  background: var(--a1491-btn-danger-bg);
  color: var(--a1491-color-text-on-dark);
}

/* [GLOBAL] Standard Card */
.a1491-card {
  border-radius: var(--a1491-surface-card-radius);
  border: var(--a1491-border-width) solid var(--a1491-border-color-dark);
  padding: var(--a1491-surface-card-padding-min);
}
.a1491-card--dark {
  background: var(--a1491-surface-elevated-bg);
  color: var(--a1491-color-text-on-dark);
}
.a1491-card--light {
  background: var(--a1491-color-bg-light);
  border-color: var(--a1491-border-color-light);
  color: var(--a1491-color-text-on-light);
}

/* [GLOBAL] Surface (generic background block, deep/primary/elevated) */
.a1491-surface {
  border-radius: var(--a1491-radius-md);
}
.a1491-surface--deep {
  background: var(--a1491-surface-deep-bg);
  color: var(--a1491-color-text-on-dark);
}
.a1491-surface--primary {
  background: var(--a1491-surface-primary-bg);
  color: var(--a1491-color-text-on-dark);
}
.a1491-surface--elevated {
  background: var(--a1491-surface-elevated-bg);
  color: var(--a1491-color-text-on-dark);
}
.a1491-surface--light {
  background: var(--a1491-color-bg-light);
  color: var(--a1491-color-text-on-light);
}

/* [DATA] Status Badge */
.a1491-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--a1491-space-4);
  border-radius: var(--a1491-radius-pill);
  padding: var(--a1491-space-4) var(--a1491-space-12);
  font-size: var(--a1491-text-label-size);
  font-weight: var(--a1491-text-label-weight);
  letter-spacing: var(--a1491-text-label-letter-spacing);
}
.a1491-badge--success { background: var(--a1491-color-success); color: var(--a1491-color-navy-900); }
.a1491-badge--warning { background: var(--a1491-color-warning); color: var(--a1491-color-navy-900); }
.a1491-badge--error   { background: var(--a1491-color-error);   color: var(--a1491-color-text-on-dark); }
.a1491-badge--neutral { background: var(--a1491-color-border-light); color: var(--a1491-color-text-on-light); }

/* [DATA] Metric Card / Data Callout numeral treatment */
.a1491-metric {
  display: flex;
  flex-direction: column;
  gap: var(--a1491-space-4);
}
.a1491-metric__value {
  font-family: var(--a1491-font-mono);
  font-size: var(--a1491-text-data-large-size);
  font-weight: var(--a1491-text-data-large-weight);
  line-height: var(--a1491-text-data-large-line-height);
  color: var(--a1491-color-brand-gold);
}
.a1491-metric__label {
  font-size: var(--a1491-text-label-size);
  color: var(--a1491-color-text-secondary);
}

/* [DOMAIN] Domain Card — Trading Automation / AI Work Automation, identical
   shape, differ only in icon + copy supplied by the consumer, never by CSS */
.a1491-domain-card {
  border-radius: var(--a1491-radius-md);
  background: var(--a1491-surface-elevated-bg);
  color: var(--a1491-color-text-on-dark);
  padding: var(--a1491-surface-card-padding-max);
  display: flex;
  flex-direction: column;
  gap: var(--a1491-space-16);
}

/* [PRODUCT] Product Card — EA / AI Level / AI 實戰手冊 / Trading Platforms */
.a1491-product-card {
  border-radius: var(--a1491-surface-card-radius);
  border: var(--a1491-border-width) solid var(--a1491-border-color-dark);
  padding: var(--a1491-surface-card-padding-min);
  display: flex;
  flex-direction: column;
  gap: var(--a1491-space-12);
}
.a1491-product-card--compact {
  padding: var(--a1491-space-16);
  gap: var(--a1491-space-8);
}

/* [CONTENT] Use Case Card */
.a1491-use-case-card {
  border-radius: var(--a1491-radius-md);
  padding: var(--a1491-space-16);
  display: flex;
  align-items: flex-start;
  gap: var(--a1491-space-12);
}

/* [ILLUSTRATION] Workflow Card — the one documented radius exception */
.a1491-workflow {
  border-radius: var(--a1491-surface-card-radius-workflow);
  background: var(--a1491-surface-elevated-bg);
  color: var(--a1491-color-text-on-dark);
  padding: var(--a1491-surface-card-padding-max);
}
.a1491-workflow--stacked {
  display: flex;
  flex-direction: column;
}
.a1491-workflow--horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Mobile-scale typography overrides — reference only, not yet attached to
   any live heading/body element. */
@media (max-width: 639px) {
  :root {
    --a1491-text-h1-size: 28px;
    --a1491-text-h1-reading-size: 30px;
    --a1491-text-h2-size: 22px;
    --a1491-text-h3-size: 18px;
    --a1491-text-h4-size: 16px;
    --a1491-text-body-large-size: 17px;
    --a1491-text-body-size: 16px;
  }
  .a1491-btn {
    height: var(--a1491-btn-height-mobile);
    width: 100%;
  }
}