/* ============================================================================
   Fokusd Design Tokens
   Mirrors Packages/Sources/SharedViews/DesignSystem.swift from the iOS app.
   All values are sRGB. Comments map back to the Swift token name.
   ============================================================================ */

:root {
  /* -------------------------------------------------------------------------
     Color — Surface
     ------------------------------------------------------------------------- */
  --fk-bg:              rgb(41, 40, 39);          /* Colors.background — #292827 charcoal */
  --fk-bg-modal:        rgb(30, 30, 30);          /* Modal/sheet surface (Settings & Session picker) */
  --fk-surface:         rgba(255, 255, 255, 0.10);/* Colors.surface — glass on dark */
  --fk-surface-soft:    rgba(255, 255, 255, 0.05);/* Lower-emphasis glass */
  --fk-border:          rgba(255, 255, 255, 0.20);/* Colors.border */
  --fk-border-soft:     rgba(255, 255, 255, 0.05);
  --fk-overlay-scrim:   rgba(0, 0, 0, 0.40);      /* Modal scrim */

  /* -------------------------------------------------------------------------
     Color — Text on dark
     ------------------------------------------------------------------------- */
  --fk-fg:              #ffffff;                  /* Colors.textPrimary */
  --fk-fg-secondary:    rgba(255, 255, 255, 0.70);/* Colors.textSecondary */
  --fk-fg-tertiary:     rgba(255, 255, 255, 0.50);/* Colors.textTertiary */
  --fk-fg-quaternary:   rgba(255, 255, 255, 0.30);/* Placeholder icons / empty states */
  --fk-fg-on-accent:    #000000;                  /* Primary button text — yellow needs black */

  /* -------------------------------------------------------------------------
     Color — Accent & Semantic
     System yellow / green / red / orange via iOS Color.* — exact RGB.
     ------------------------------------------------------------------------- */
  --fk-accent:          #ffcc00;                  /* Color.yellow (iOS system yellow) */
  --fk-accent-warm:     #ff9500;                  /* Color.orange used in accentGradient start */
  --fk-success:         #34c759;                  /* Color.green */
  --fk-success-mint:    #00c7be;                  /* Color.mint */
  --fk-danger:          #ff3b30;                  /* Color.red */
  --fk-disabled:        rgba(142, 142, 147, 0.50);/* Color.gray.opacity(0.5) */
  --fk-warning:         #ff9500;                  /* Used for low-time countdown */

  /* Session warmth — the breathing background overlay during active sessions */
  --fk-session-warmth:  rgb(255, 165, 0);
  --fk-session-glow:    rgba(255, 149, 0, 0.50);

  /* -------------------------------------------------------------------------
     Gradients
     ------------------------------------------------------------------------- */
  --fk-grad-accent:     linear-gradient(90deg, #ff9500 0%, #ffcc00 100%);   /* Primary button */
  --fk-grad-success:    linear-gradient(135deg, rgba(52,199,89,0.8), #34c759 50%, rgba(0,199,190,0.9)); /* successGradient */
  --fk-grad-danger:     linear-gradient(90deg, rgba(255,59,48,0.8), #ff3b30);
  --fk-grad-border:     linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05));

  /* -------------------------------------------------------------------------
     Glows (shadows used as soft warm halos rather than hard drop shadows)
     ------------------------------------------------------------------------- */
  --fk-glow-accent:     0 0 8px rgba(255, 204, 0, 0.60);
  --fk-glow-accent-lg:  0 0 16px rgba(255, 204, 0, 0.60), 0 0 28px rgba(255, 149, 0, 0.45);
  --fk-glow-success:    0 0 6px rgba(52, 199, 89, 0.50);
  --fk-glow-danger:     0 0 6px rgba(255, 59, 48, 0.40);

  /* Shadow used for framed photo cards */
  --fk-shadow-photo:    0 6px 12px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.15);

  /* -------------------------------------------------------------------------
     Radius
     ------------------------------------------------------------------------- */
  --fk-radius-sm:       4px;
  --fk-radius-md:       8px;
  --fk-radius:          12px;   /* Dimensions.cornerRadius — buttons, cards, surfaces */
  --fk-radius-lg:       20px;   /* Dimensions.cornerRadiusLarge — sheets, modals */
  --fk-radius-pill:     999px;

  /* -------------------------------------------------------------------------
     Spacing (matches Dimensions.* in DesignSystem.swift)
     ------------------------------------------------------------------------- */
  --fk-space-1:         4px;
  --fk-space-2:         8px;    /* spacingSmall */
  --fk-space-3:         12px;   /* spacingMedium */
  --fk-space-4:         16px;   /* spacing / padding */
  --fk-space-5:         20px;   /* spacingLarge */
  --fk-space-6:         24px;   /* paddingLarge */
  --fk-space-8:         32px;
  --fk-space-10:        40px;

  /* Hit targets */
  --fk-button-height:   50px;   /* Dimensions.buttonHeight */
  --fk-icon-button:     44px;   /* Dimensions.iconButtonSize */

  /* -------------------------------------------------------------------------
     Type — Family
     The iOS app uses .system(design: .rounded) for almost everything.
     SF Rounded is Apple-only — on web we fall back to Nunito (Google Fonts)
     which has near-identical metrics. Mono uses SF Mono → JetBrains Mono.
     ⚠️ FLAG: SF Rounded is not redistributable. Use Nunito on web.
     ------------------------------------------------------------------------- */
  --fk-font-rounded:    "Plus Jakarta Sans", -apple-system-rounded, "SF Pro Rounded",
                        ui-rounded, "Avenir Next", system-ui, sans-serif;
  --fk-font-system:     -apple-system, BlinkMacSystemFont, "SF Pro Text",
                        system-ui, "Segoe UI", sans-serif;
  --fk-font-mono:       "JetBrains Mono", ui-monospace, "SF Mono",
                        Menlo, Consolas, monospace;

  /* -------------------------------------------------------------------------
     Type — Scale (matches iOS Dynamic Type sizes used in source)
     ------------------------------------------------------------------------- */
  --fk-fs-display:      40px;   /* Onboarding title — .system(size: 40, weight: .heavy) */
  --fk-fs-largeTitle:   34px;   /* .largeTitle */
  --fk-fs-title:        28px;   /* .title */
  --fk-fs-title2:       22px;   /* .title2 */
  --fk-fs-headline:     17px;   /* .headline (bold body) */
  --fk-fs-body:         17px;   /* .body */
  --fk-fs-subhead:      15px;   /* .subheadline */
  --fk-fs-callout:      16px;
  --fk-fs-caption:      12px;   /* .caption */
  --fk-fs-caption2:     11px;
  --fk-fs-timer:        32px;   /* SessionTimerDisplay — monospaced bold 32 */

  /* Weights — only three are used in product */
  --fk-fw-regular:      400;
  --fk-fw-medium:       500;
  --fk-fw-semibold:     600;
  --fk-fw-bold:         700;
  --fk-fw-heavy:        800;    /* Used on onboarding display + "Important" labels */

  /* Tracking */
  --fk-tracking-tight:  -0.5px; /* applied to display headlines */
  --fk-tracking-normal: 0;

  /* Line-height */
  --fk-lh-tight:        1.1;
  --fk-lh-snug:         1.25;
  --fk-lh-body:         1.45;

  /* -------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------- */
  --fk-ease:            cubic-bezier(0.4, 0, 0.2, 1);          /* .easeInOut */
  --fk-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);          /* .easeOut */
  --fk-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);     /* spring response: 0.4 dampingFraction: 0.8 */
  --fk-dur-fast:        200ms;
  --fk-dur:             400ms;
  --fk-dur-breath:      3500ms;  /* Active-session radial breathing */
}

/* =========================================================================
   Semantic element styles
   Use these directly for prototypes, or layer your own classes on top.
   ========================================================================= */

html, body {
  background: var(--fk-bg);
  color: var(--fk-fg);
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-body);
  line-height: var(--fk-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .fk-h1 {
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-display);
  font-weight: var(--fk-fw-heavy);
  letter-spacing: var(--fk-tracking-tight);
  line-height: var(--fk-lh-tight);
  color: var(--fk-fg);
  text-wrap: pretty;
}

h2, .fk-h2 {
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-title);
  font-weight: var(--fk-fw-bold);
  line-height: var(--fk-lh-snug);
  color: var(--fk-fg);
}

h3, .fk-h3 {
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-title2);
  font-weight: var(--fk-fw-bold);
  color: var(--fk-fg);
}

h4, .fk-h4 {
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-headline);
  font-weight: var(--fk-fw-bold);
  color: var(--fk-fg);
}

p, .fk-body {
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-body);
  font-weight: var(--fk-fw-regular);
  color: var(--fk-fg-secondary);
}

.fk-subhead {
  font-size: var(--fk-fs-subhead);
  color: var(--fk-fg-secondary);
}

.fk-caption {
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-caption);
  color: var(--fk-fg-tertiary);
}

.fk-mono {
  font-family: var(--fk-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Component primitives ===================================================== */

.fk-card {
  background: var(--fk-surface);
  border-radius: var(--fk-radius);
  padding: var(--fk-space-4);
}

.fk-card--bordered {
  border: 1px solid var(--fk-border);
}

.fk-modal {
  background: rgba(30, 30, 30, 0.95);
  border-radius: var(--fk-radius-lg);
  border: 1px solid var(--fk-border);
  padding: var(--fk-space-6);
}

.fk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fk-space-2);
  height: var(--fk-button-height);
  padding: 0 var(--fk-space-5);
  border-radius: var(--fk-radius);
  border: none;
  font-family: var(--fk-font-rounded);
  font-size: var(--fk-fs-headline);
  font-weight: var(--fk-fw-semibold);
  cursor: pointer;
  transition: transform var(--fk-dur-fast) var(--fk-ease),
              opacity var(--fk-dur-fast) var(--fk-ease);
}

.fk-btn:active { transform: scale(0.97); }

.fk-btn--primary {
  background: var(--fk-grad-accent);
  color: var(--fk-fg-on-accent);
  box-shadow: var(--fk-glow-accent);
}

.fk-btn--secondary {
  background: var(--fk-disabled);
  color: var(--fk-fg);
}

.fk-btn--destructive {
  background: var(--fk-danger);
  color: var(--fk-fg);
  box-shadow: var(--fk-glow-danger);
}

.fk-btn--outline {
  background: transparent;
  color: var(--fk-accent);
  border: 2px solid var(--fk-accent);
}