/* T1Mem Design Tokens v2.0
 * Source: outputs/t1mem_design_system_v1.md
 * Scope: src/t1mem-dashboard/* + start.html
 */

:root {
  /* ===== Brand ===== */
  --t1-brand-50:  #FDF8E8;
  --t1-brand-100: #F5EBC4;
  --t1-brand-200: #EBD996;
  --t1-brand-300: #E0C768;
  --t1-brand-400: #D4B443;
  --t1-brand-500: #C9A227;  /* primary brand gold */
  --t1-brand-600: #B08A1F;
  --t1-brand-700: #8F6F1A;

  /* ===== Neutral / Midnight ===== */
  --t1-bg:        #0B0A14;
  --t1-bg-elevated: #121020;
  --t1-surface-1: #131229;
  --t1-surface-2: #1C1A38;
  --t1-surface-3: #252345;
  --t1-surface-4: #2E2B52;
  --t1-border:    rgba(255, 255, 255, 0.08);
  --t1-border-strong: rgba(255, 255, 255, 0.14);
  --t1-border-glow: rgba(201, 162, 39, 0.35);

  /* ===== Text (WCAG AA+ on --t1-bg) ===== */
  --t1-text-1:    #F4F3FA;   /* ~15:1 */
  --t1-text-2:    #B6B3D5;   /* ~7.6:1 */
  --t1-text-3:    #7C7899;   /* ~4.7:1 */

  /* ===== Semantic ===== */
  --t1-info:      #4FACFE;
  --t1-info-bg:   rgba(79, 172, 254, 0.12);
  --t1-success:   #34D399;
  --t1-success-bg:rgba(52, 211, 153, 0.12);
  --t1-warning:   #FB923C;
  --t1-warning-bg:rgba(251, 146, 60, 0.12);
  --t1-danger:    #FB7185;
  --t1-danger-bg: rgba(251, 113, 133, 0.12);
  --t1-purple:    #A855F7;
  --t1-purple-bg: rgba(168, 85, 247, 0.12);
  --t1-cyan:      #22D3EE;
  --t1-cyan-bg:   rgba(34, 211, 238, 0.12);

  /* ===== Typography ===== */
  --t1-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --t1-font-mono: "JetBrains Mono", "SF Mono", Monaco, monospace;

  --t1-text-xs:   0.75rem;   /* 12px */
  --t1-text-sm:   0.8125rem; /* 13px */
  --t1-text-base: 0.875rem;  /* 14px */
  --t1-text-md:   1rem;      /* 16px */
  --t1-text-lg:   1.25rem;   /* 20px */
  --t1-text-xl:   1.5rem;    /* 24px */
  --t1-text-2xl:  2rem;      /* 32px */
  --t1-text-3xl:  2.5rem;    /* 40px */
  --t1-text-4xl:  3.5rem;    /* 56px */

  --t1-weight-normal:   400;
  --t1-weight-medium:   500;
  --t1-weight-semibold: 600;
  --t1-weight-bold:     700;

  --t1-leading-tight:   1.25;
  --t1-leading-normal:  1.5;
  --t1-leading-relaxed: 1.625;

  /* ===== Spacing (4px base) ===== */
  --t1-space-1: 0.25rem;  /* 4px */
  --t1-space-2: 0.5rem;   /* 8px */
  --t1-space-3: 0.75rem;  /* 12px */
  --t1-space-4: 1rem;     /* 16px */
  --t1-space-5: 1.25rem;  /* 20px */
  --t1-space-6: 1.5rem;   /* 24px */
  --t1-space-8: 2rem;     /* 32px */
  --t1-space-10: 2.5rem;  /* 40px */
  --t1-space-12: 3rem;    /* 48px */
  --t1-space-16: 4rem;    /* 64px */
  --t1-space-20: 5rem;    /* 80px */

  /* ===== Radius ===== */
  --t1-radius-sm: 6px;
  --t1-radius-md: 8px;
  --t1-radius-lg: 12px;
  --t1-radius-xl: 16px;
  --t1-radius-2xl: 20px;
  --t1-radius-full: 9999px;

  /* ===== Shadow ===== */
  --t1-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --t1-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --t1-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.40);
  --t1-shadow-gold: 0 0 24px rgba(201, 162, 39, 0.15);
  --t1-shadow-glow: 0 0 40px rgba(79, 172, 254, 0.10);

  /* ===== Motion ===== */
  --t1-duration-fast:   150ms;
  --t1-duration-normal: 250ms;
  --t1-duration-slow:   400ms;
  --t1-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --t1-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}