/*
 * OrbitaClaw Design Tokens — source of truth.
 *
 * Consumed by:
 *   - miniapp/src/styles.css   (@import "../../shared/design-system/tokens.css")
 *   - infra/www/index.html     (<link rel="stylesheet" href="/tokens.css">
 *                               via git-tracked symlink infra/www/tokens.css)
 *
 * DO NOT duplicate these values elsewhere. Add a token here and reference it
 * via var(--name) — don't hard-code hex/px in consumer stylesheets.
 *
 * Naming: semantic first (--primary), role-specific second (--primary-hover),
 * scale last (--bg-2). Avoid naming after hue — if the palette ever shifts
 * from coral to teal, --primary stays valid, --coral wouldn't.
 *
 * See shared/design-system/README.md for how to add a token,
 * docs/DESIGN_SYSTEM.md for full reference and contribution rules.
 */

:root {
  /* Warm palette — "Her"-inspired */
  --theme-light-bg:       #fbf6ef;
  --theme-light-bg-2:     #f6efe4;
  --theme-light-bg-3:     #ece0cf;
  --theme-light-fg:       #3a281d;
  --theme-light-fg-2:     #4e3525;
  --theme-light-muted:    #6b4a36;
  --theme-light-muted-2:  #b69c7c;
  --theme-light-card:     #ffffff;
  --theme-light-card-bg:  rgba(255, 255, 255, 0.75); /* translucent card for landing glass effect */
  --theme-light-border:   rgba(58, 40, 29, 0.12);
  --theme-light-border-2: rgba(58, 40, 29, 0.20);

  --theme-dark-bg:       #1e1410;
  --theme-dark-bg-2:     #2a1c13;
  --theme-dark-bg-3:     #38261a;
  --theme-dark-fg:       #f5ede4;
  --theme-dark-fg-2:     #e0cfc3;
  --theme-dark-muted:    #b69c7c;
  --theme-dark-muted-2:  #7a5c44;
  --theme-dark-card:     #2a1c13;
  --theme-dark-card-bg:  rgba(42, 28, 19, 0.75);
  --theme-dark-border:   rgba(245, 237, 228, 0.10);
  --theme-dark-border-2: rgba(245, 237, 228, 0.18);

  /* Space palette — v2 "Туманность" */
  --theme-space-bg:       #070a14;
  --theme-space-bg-2:     #0c1120;
  --theme-space-bg-3:     #131a2c;
  --theme-space-fg:       #eef2fb;
  --theme-space-fg-2:     #c2ccdf;
  --theme-space-muted:    #8893ad;
  --theme-space-muted-2:  #4d586f;
  --theme-space-card:     #111726;
  --theme-space-card-bg:  rgba(17, 23, 38, 0.72);
  --theme-space-border:   rgba(125, 150, 210, 0.12);
  --theme-space-border-2: rgba(125, 150, 210, 0.24);

  --theme-space-light-bg:       #f3f6fc;
  --theme-space-light-bg-2:     #e9eef8;
  --theme-space-light-bg-3:     #dde5f3;
  --theme-space-light-fg:       #0e1626;
  --theme-space-light-fg-2:     #303c52;
  --theme-space-light-muted:    #5e6b85;
  --theme-space-light-muted-2:  #9aa6bd;
  --theme-space-light-card:     #ffffff;
  --theme-space-light-card-bg:  rgba(255, 255, 255, 0.75);
  --theme-space-light-border:   rgba(20, 35, 70, 0.10);
  --theme-space-light-border-2: rgba(20, 35, 70, 0.18);

  --bg:        var(--theme-light-bg);
  --bg-2:      var(--theme-light-bg-2);
  --bg-3:      var(--theme-light-bg-3);
  --fg:        var(--theme-light-fg);
  --fg-2:      var(--theme-light-fg-2);
  --muted:     var(--theme-light-muted);
  --muted-2:   var(--theme-light-muted-2);
  --card:      var(--theme-light-card);
  --card-bg:   var(--theme-light-card-bg);
  --border:    var(--theme-light-border);
  --border-2:  var(--theme-light-border-2);
  --app-bg:    var(--bg);

  /* Primary — coral */
  --primary:       #e5633f;
  --primary-hover: #ef8466;
  --primary-press: #c94a28;
  --primary-ink:   #fff9f2;
  --primary-bg:    rgba(229, 99, 63, 0.10);

  /* Secondary — deep teal (used for accents that aren't CTA) */
  --secondary: #216a63;
  --secondary-bg: rgba(33, 106, 99, 0.12);

  /* Brand mark — light theme uses coffee-on-cream variant */
  --logo-orbit-url: url("/logo-orbita.png");

  /* Semantic */
  --success:    #6b8a4a;
  --success-bg: rgba(107, 138, 74, 0.14);
  --warning:    #c08a2e;
  --warning-bg: rgba(192, 138, 46, 0.14);
  --link:       #9f351d;
  --link-hover: #7a250f;

  /* Danger — burgundy, split from coral so destructive actions don't
   * read as the same gesture as "Save" / "Confirm". */
  --danger-100: #f3cfc4;
  --danger-400: #b8442d;
  --danger-500: #8a2a14;
  --danger-700: #5e1808;
  --danger:     var(--danger-500);
  --danger-bg:  rgba(138, 42, 20, 0.08);
  --info:       #5c8076;
  --info-bg:    rgba(92, 128, 118, 0.14);

  /* Typography — Zen Antique Soft (display/headings) + Inter (body/UI) */
  --font-display: "Zen Antique Soft", "Cormorant Garamond", Georgia, serif;
  --font-heading: "Zen Antique Soft", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
                  Consolas, monospace;

  /* Type scale (size / line-height multiplier) — mirrors Figma roles */
  --fs-display:    64px;
  --lh-display:    1.2;
  --ls-display:    -0.04em;
  --fs-heading:    22px;
  --lh-heading:    1.2;
  --fs-body:       16px;
  --lh-body:       1.5;
  --fs-body-sm:    14px;
  --fs-control:    16px;
  --lh-control:    1.2;
  --fs-control-sm: 14px;
  --fs-caption:    13px;
  --lh-caption:    1.2;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Gradients */
  --gradient-warm: linear-gradient(135deg, #e5633f 0%, #ffa66b 100%);
  --gradient-dawn: linear-gradient(180deg, #fff4ec 0%, #ffd4c2 100%);
  --gradient-cta: var(--gradient-warm);

  /* Elevation — warm shadows */
  --shadow-xs:  0 1px 2px rgba(58, 40, 29, 0.06);
  --shadow-sm:  0 2px 6px rgba(58, 40, 29, 0.07), 0 1px 2px rgba(58, 40, 29, 0.04);
  --shadow-md:  0 8px 24px -8px rgba(58, 40, 29, 0.16);
  --glow-coral: 0 8px 28px -10px rgba(229, 99, 63, 0.45);
  --glow-secondary: 0 8px 28px -10px rgba(33, 106, 99, 0.38);
  --glow-accent: 0 8px 28px -10px rgba(33, 106, 99, 0.38);

  /* Radii — existing scale (4/8/10/12/16) preserved to avoid a global
   * visual shift. v2 also defines a chat-bubble radius and a 2xl radius
   * for hero containers; consume those by name only when a screen needs
   * them, not by remapping the existing tokens. */
  --r-xs:     4px;
  --r-sm:     8px;
  --r-md:    10px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   32px;
  --r-bubble:18px;
  --r-full:  999px;

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  0.14s;
  --dur-base:  0.25s;

  --ui-text-scale: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       var(--theme-dark-bg);
    --bg-2:     var(--theme-dark-bg-2);
    --bg-3:     var(--theme-dark-bg-3);
    --fg:       var(--theme-dark-fg);
    --fg-2:     var(--theme-dark-fg-2);
    --muted:    var(--theme-dark-muted);
    --muted-2:  var(--theme-dark-muted-2);
    --card:     var(--theme-dark-card);
    --card-bg:  var(--theme-dark-card-bg);
    --border:   var(--theme-dark-border);
    --border-2: var(--theme-dark-border-2);

    /* Burgundy #8a2a14 only hits 2:1 on walnut — fails WCAG AA for any
     * text-as-danger usage. Lighten to a warm-burgundy that still reads
     * as "alarming" rather than "rose" (contrast 6.3:1 on walnut). */
    --danger:    #e89882;
    --danger-bg: rgba(232, 152, 130, 0.14);

    /* Coral mark reads on the dark cocoa background; coffee mark vanishes. */
    --link:       #ef8466;
    --link-hover: #ff9d7c;
    --logo-orbit-url: url("/logo-orbita-coral.png");
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:        var(--theme-light-bg);
  --bg-2:      var(--theme-light-bg-2);
  --bg-3:      var(--theme-light-bg-3);
  --fg:        var(--theme-light-fg);
  --fg-2:      var(--theme-light-fg-2);
  --muted:     var(--theme-light-muted);
  --muted-2:   var(--theme-light-muted-2);
  --card:      var(--theme-light-card);
  --card-bg:   var(--theme-light-card-bg);
  --border:    var(--theme-light-border);
  --border-2:  var(--theme-light-border-2);
  /* Revert dark-mode danger lightening when user forces light theme
   * (OS prefers-dark + app override = light). Without this, light
   * burgundy #e89882 would land on cream and lose contrast (2.6:1). */
  --danger:    var(--danger-500);
  --danger-bg: rgba(138, 42, 20, 0.08);
  --link:       #9f351d;
  --link-hover: #7a250f;
  --logo-orbit-url: url("/logo-orbita.png");
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:       var(--theme-dark-bg);
  --bg-2:     var(--theme-dark-bg-2);
  --bg-3:     var(--theme-dark-bg-3);
  --fg:       var(--theme-dark-fg);
  --fg-2:     var(--theme-dark-fg-2);
  --muted:    var(--theme-dark-muted);
  --muted-2:  var(--theme-dark-muted-2);
  --card:     var(--theme-dark-card);
  --card-bg:  var(--theme-dark-card-bg);
  --border:   var(--theme-dark-border);
  --border-2: var(--theme-dark-border-2);
  --danger:    #e89882;
  --danger-bg: rgba(232, 152, 130, 0.14);
  --link:       #ef8466;
  --link-hover: #ff9d7c;
  --logo-orbit-url: url("/logo-orbita-coral.png");
}

:root[data-theme="space"],
:root[data-theme="space-light"],
:root[data-theme="space-dark"] {
  --primary:       #3b6ef5;
  --primary-hover: #5b87f7;
  --primary-press: #2f59d6;
  --primary-ink:   #ffffff;
  --primary-bg:    rgba(59, 110, 245, 0.12);

  --secondary:    #3b6ef5;
  --secondary-bg: rgba(59, 110, 245, 0.12);
  --accent:       #7b5cf0;
  --accent-bg:    rgba(123, 92, 240, 0.12);

  --success:    #2fbf71;
  --success-bg: rgba(47, 191, 113, 0.14);
  --warning:    #e2a93b;
  --warning-bg: rgba(226, 169, 59, 0.14);
  --info:       #3b6ef5;
  --info-bg:    rgba(59, 110, 245, 0.12);
  --link:       #2f59d6;
  --link-hover: #3b6ef5;
  --danger:     #e23e5c;
  --danger-bg:  rgba(226, 62, 92, 0.14);

  --gradient-cta: linear-gradient(100deg, #3b6ef5 0%, #7b5cf0 100%);
  --gradient-warm: var(--gradient-cta);
}

:root[data-theme="space"],
:root[data-theme="space-light"] {
  color-scheme: light;

  --bg:       var(--theme-space-light-bg);
  --bg-2:     var(--theme-space-light-bg-2);
  --bg-3:     var(--theme-space-light-bg-3);
  --fg:       var(--theme-space-light-fg);
  --fg-2:     var(--theme-space-light-fg-2);
  --muted:    var(--theme-space-light-muted);
  --muted-2:  var(--theme-space-light-muted-2);
  --card:     var(--theme-space-light-card);
  --card-bg:  var(--theme-space-light-card-bg);
  --border:   var(--theme-space-light-border);
  --border-2: var(--theme-space-light-border-2);
  --primary:       #2f59d6;
  --primary-hover: #3b6ef5;
  --primary-press: #2447b0;
  --gradient-dawn: linear-gradient(180deg, #ffffff 0%, #dde5f3 100%);
  --app-bg:
    radial-gradient(1px 1px at 18% 10%, rgba(70, 95, 150, 0.24), transparent),
    radial-gradient(1px 1px at 64% 24%, rgba(70, 95, 150, 0.18), transparent),
    radial-gradient(1px 1px at 84% 14%, rgba(70, 95, 150, 0.20), transparent),
    radial-gradient(135% 95% at 22% -12%, rgba(123, 92, 240, 0.12), transparent 56%),
    radial-gradient(120% 80% at 98% 110%, rgba(59, 110, 245, 0.10), transparent 60%),
    var(--bg);
  --shadow-xs: 0 1px 2px rgba(20, 35, 70, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 35, 70, 0.09), 0 1px 2px rgba(20, 35, 70, 0.05);
  --shadow-md: 0 8px 32px -8px rgba(20, 35, 70, 0.20);
  --glow-coral: 0 8px 30px -10px rgba(59, 110, 245, 0.40);
  --glow-secondary: 0 8px 32px -8px rgba(59, 110, 245, 0.34);
  --glow-accent: 0 8px 32px -8px rgba(123, 92, 240, 0.30);
  --logo-orbit-url: url("/logo-orbita.png");
}

:root[data-theme="space-dark"] {
  color-scheme: dark;

  --bg:       var(--theme-space-bg);
  --bg-2:     var(--theme-space-bg-2);
  --bg-3:     var(--theme-space-bg-3);
  --fg:       var(--theme-space-fg);
  --fg-2:     var(--theme-space-fg-2);
  --muted:    var(--theme-space-muted);
  --muted-2:  var(--theme-space-muted-2);
  --card:     var(--theme-space-card);
  --card-bg:  var(--theme-space-card-bg);
  --border:   var(--theme-space-border);
  --border-2: var(--theme-space-border-2);
  --link:       #5b87f7;
  --link-hover: #82a4fa;
  --gradient-dawn: linear-gradient(180deg, #111726 0%, #070a14 100%);
  --app-bg:
    radial-gradient(1px 1px at 18% 10%, rgba(220, 226, 255, 0.42), transparent),
    radial-gradient(1px 1px at 63% 24%, rgba(220, 226, 255, 0.28), transparent),
    radial-gradient(1px 1px at 84% 14%, rgba(220, 226, 255, 0.34), transparent),
    radial-gradient(1px 1px at 39% 44%, rgba(220, 226, 255, 0.20), transparent),
    radial-gradient(1px 1px at 74% 58%, rgba(220, 226, 255, 0.24), transparent),
    radial-gradient(1px 1px at 27% 74%, rgba(220, 226, 255, 0.24), transparent),
    radial-gradient(1.5px 1.5px at 52% 92%, rgba(220, 226, 255, 0.30), transparent),
    radial-gradient(135% 95% at 22% -12%, rgba(96, 84, 180, 0.16), transparent 56%),
    radial-gradient(120% 80% at 98% 110%, rgba(40, 150, 165, 0.09), transparent 60%),
    var(--bg);
  --shadow-xs: 0 1px 2px rgba(3, 5, 16, 0.50);
  --shadow-sm: 0 2px 8px rgba(3, 5, 16, 0.60), 0 1px 2px rgba(3, 5, 16, 0.35);
  --shadow-md: 0 8px 32px -8px rgba(3, 5, 16, 0.80);
  --glow-coral: 0 8px 30px -10px rgba(59, 110, 245, 0.58);
  --glow-secondary: 0 8px 32px -8px rgba(59, 110, 245, 0.46);
  --glow-accent: 0 8px 32px -8px rgba(123, 92, 240, 0.42);
  --logo-orbit-url: url("/logo-orbita-coral.png");
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="space"] {
    color-scheme: dark;

    --bg:       var(--theme-space-bg);
    --bg-2:     var(--theme-space-bg-2);
    --bg-3:     var(--theme-space-bg-3);
    --fg:       var(--theme-space-fg);
    --fg-2:     var(--theme-space-fg-2);
    --muted:    var(--theme-space-muted);
    --muted-2:  var(--theme-space-muted-2);
    --card:     var(--theme-space-card);
    --card-bg:  var(--theme-space-card-bg);
    --border:   var(--theme-space-border);
    --border-2: var(--theme-space-border-2);
    --link:       #5b87f7;
    --link-hover: #82a4fa;
    --gradient-dawn: linear-gradient(180deg, #111726 0%, #070a14 100%);
    --app-bg:
      radial-gradient(1px 1px at 18% 10%, rgba(220, 226, 255, 0.42), transparent),
      radial-gradient(1px 1px at 63% 24%, rgba(220, 226, 255, 0.28), transparent),
      radial-gradient(1px 1px at 84% 14%, rgba(220, 226, 255, 0.34), transparent),
      radial-gradient(1px 1px at 39% 44%, rgba(220, 226, 255, 0.20), transparent),
      radial-gradient(1px 1px at 74% 58%, rgba(220, 226, 255, 0.24), transparent),
      radial-gradient(1px 1px at 27% 74%, rgba(220, 226, 255, 0.24), transparent),
      radial-gradient(1.5px 1.5px at 52% 92%, rgba(220, 226, 255, 0.30), transparent),
      radial-gradient(135% 95% at 22% -12%, rgba(96, 84, 180, 0.16), transparent 56%),
      radial-gradient(120% 80% at 98% 110%, rgba(40, 150, 165, 0.09), transparent 60%),
      var(--bg);
    --shadow-xs: 0 1px 2px rgba(3, 5, 16, 0.50);
    --shadow-sm: 0 2px 8px rgba(3, 5, 16, 0.60), 0 1px 2px rgba(3, 5, 16, 0.35);
    --shadow-md: 0 8px 32px -8px rgba(3, 5, 16, 0.80);
    --glow-coral: 0 8px 30px -10px rgba(59, 110, 245, 0.58);
    --glow-secondary: 0 8px 32px -8px rgba(59, 110, 245, 0.46);
    --glow-accent: 0 8px 32px -8px rgba(123, 92, 240, 0.42);
    --logo-orbit-url: url("/logo-orbita-coral.png");
  }
}

:root[data-text-size="large"] {
  --ui-text-scale: 1.15;
}