/*
  Soonwise design tokens — translated from Soonwise/Theme/DesignSystem.swift.
  This file is the CSS mirror of the Swift source; when DesignSystem.swift
  changes, update the corresponding value here too. Not consumed by the app.
*/

:root {
  /* Status colors (SwiftUI system colors, sRGB hex approximations) */
  --app-danger: #FF3B30;
  --app-warn: #FF9500;
  --app-okay: #FFCC00;
  --app-success: #34C759;
  --app-info: #007AFF;
  --app-neutral: #8E8E93;
  --app-accent: #AF52DE;
  --app-caution: #FF9500;
  --app-idea-accent: #FFCC00;
  --app-chart-confidence: #30B0C7;
  --app-chart-primary: #007AFF;
  --app-chart-primary-stroke: #5856D6;

  /* Tints — light mode values (opaque, ~15% composited over systemBackground) */
  --app-info-tint: #D9EBFF;
  --app-danger-tint: #FFE2E0;
  --app-success-tint: #E1F7E6;
  --app-warn-tint: #FFEFD9;
  --app-okay-tint: #FFF7D9;
  --app-neutral-tint: #EEEEF0;
  --app-accent-tint: #F3E5FA;

  /* System semantic backgrounds — light mode */
  --app-background: #FFFFFF;
  --app-secondary-background: #F2F2F7;
  --app-card-background: #F2F2F7;
  --app-ui-element-bg: rgba(120, 120, 128, 0.2);
  --app-border: rgba(60, 60, 67, 0.29);
  --app-disabled: rgba(60, 60, 67, 0.3);
  --app-bar-label-text: #FFFFFF;
  --app-shadow: rgba(0, 0, 0, 0.1);

  /* Spacing scale — 4pt baseline grid */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;

  /* Card / touch-target metrics */
  --card-min-row-height: 44px;
  --card-vertical-padding: var(--space-xxs);
  --touch-target-minimum: 44px;
  --touch-target-comfortable: 48px;

  /* Animation durations (spring; values below are duration only) */
  --anim-instant: 0.15s;
  --anim-quick: 0.22s;
  --anim-standard: 0.28s;
  --anim-gentle: 0.35s;
  --anim-smooth: 0.45s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-info-tint: #183656;
    --app-danger-tint: #552625;
    --app-success-tint: #21492C;
    --app-warn-tint: #604218;
    --app-okay-tint: #554A1B;
    --app-neutral-tint: #383838;
    --app-accent-tint: #442B53;

    --app-background: #000000;
    --app-secondary-background: #1C1C1E;
    --app-card-background: #1C1C1E;
    --app-ui-element-bg: rgba(120, 120, 128, 0.36);
    --app-border: rgba(84, 84, 88, 0.6);
    --app-disabled: rgba(235, 235, 245, 0.3);
    --app-bar-label-text: #000000;
  }
}

:root[data-theme="dark"] {
  --app-info-tint: #183656;
  --app-danger-tint: #552625;
  --app-success-tint: #21492C;
  --app-warn-tint: #604218;
  --app-okay-tint: #554A1B;
  --app-neutral-tint: #383838;
  --app-accent-tint: #442B53;

  --app-background: #000000;
  --app-secondary-background: #1C1C1E;
  --app-card-background: #1C1C1E;
  --app-ui-element-bg: rgba(120, 120, 128, 0.36);
  --app-border: rgba(84, 84, 88, 0.6);
  --app-disabled: rgba(235, 235, 245, 0.3);
  --app-bar-label-text: #000000;
}

:root[data-theme="light"] {
  --app-info-tint: #D9EBFF;
  --app-danger-tint: #FFE2E0;
  --app-success-tint: #E1F7E6;
  --app-warn-tint: #FFEFD9;
  --app-okay-tint: #FFF7D9;
  --app-neutral-tint: #EEEEF0;
  --app-accent-tint: #F3E5FA;

  --app-background: #FFFFFF;
  --app-secondary-background: #F2F2F7;
  --app-card-background: #F2F2F7;
  --app-ui-element-bg: rgba(120, 120, 128, 0.2);
  --app-border: rgba(60, 60, 67, 0.29);
  --app-disabled: rgba(60, 60, 67, 0.3);
  --app-bar-label-text: #FFFFFF;
}

body {
  background: var(--app-background);
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  margin: 0;
  padding: var(--space-lg);
}

/* Typography scale (SF Pro sizes matching Soonwise Font extension) */
.app-large-title  { font-size: 34px; font-weight: 700; }
.app-title        { font-size: 22px; font-weight: 600; }
.app-subtitle     { font-size: 20px; font-weight: 600; }
.app-headline     { font-size: 17px; font-weight: 600; }
.app-body         { font-size: 17px; font-weight: 400; }
.app-subheadline  { font-size: 15px; font-weight: 400; }
.app-caption      { font-size: 12px; font-weight: 400; }
.app-label        { font-size: 12px; font-weight: 500; }
.app-footnote     { font-size: 13px; font-weight: 400; }