/* Phoros · App Tokens
 * ─────────────────────
 * Extension layer for the SaaS platform. Inherits everything from
 * `colors_and_type.css`, then overrides defaults that need to behave
 * differently in-app:
 *
 *   1. Dark mode is the default. Light mode is opt-in via `:root.light`.
 *   2. A denser type scale (`.app-*` utility classes).
 *   3. More elevation layers (sidebar → card → popover → modal).
 *   4. Semantic colors beyond success (warning, danger, info).
 *   5. A categorical chart palette tuned to harmonize with indigo.
 *   6. Faster, quieter motion durations.
 *   7. A density toggle: `data-density="compact"` shrinks padding/lh ~20%.
 *
 * Load AFTER `colors_and_type.css`:
 *   <link rel="stylesheet" href="/colors_and_type.css">
 *   <link rel="stylesheet" href="/app_tokens.css">
 */

@import url("./colors_and_type.css");

/* ──────────────────────────────────────────────────────────────────────────
 * 1. Dark-by-default for the app.
 *    The site CSS keeps light as default; this layer flips that so any
 *    document loading app_tokens.css is in dark mode unless overridden by
 *    `:root.light`. The dark token block from colors_and_type.css is
 *    re-applied at the :root level for higher specificity.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --background:        #0B0B0F;
  --bg:                #0B0B0F;
  --surface:           #131319;
  --surface-soft:      #17171F;
  --nav:               rgba(11, 11, 15, 0.78);

  --text:              #F2F2F4;
  --text-2:            #9C9CA6;
  --text-3:            #71717A;

  --accent:            #8B82FF;
  --accent-hover:      #A39BFF;
  --accent-dim:        rgba(139, 130, 255, 0.14);
  --accent-glow:       #B8B1FF;
  --accent-glow-soft:  rgba(184, 177, 255, 0.16);

  --border:            rgba(255, 255, 255, 0.08);
  --border-strong:     rgba(255, 255, 255, 0.16);
  --line-tech:         rgba(255, 255, 255, 0.42);

  --success:           #34D399;

  color-scheme: dark;
}

/* Opt-in light mode for app (e.g. a single light screen, or a user pref). */
:root.light {
  --background:        #F7F7F8;
  --bg:                #F7F7F8;
  --surface:           #FFFFFF;
  --surface-soft:      #FBFBFC;
  --nav:               rgba(247, 247, 248, 0.85);
  --text:              #111114;
  --text-2:            #65656D;
  --text-3:            #7D7E86;
  --accent:            #4338CA;
  --accent-hover:      #3730A3;
  --accent-dim:        rgba(67, 56, 202, 0.08);
  --accent-glow:       #7B73FF;
  --accent-glow-soft:  rgba(123, 115, 255, 0.18);
  --border:            rgba(17, 17, 20, 0.07);
  --border-strong:     rgba(17, 17, 20, 0.12);
  --line-tech:         rgba(17, 17, 20, 0.52);
  --success:           #059669;
  color-scheme: light;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 2. Elevation layers
 *    Marketing has 3 surfaces. App needs 6: base → panel → soft → raised
 *    → overlay → scrim. Use --surface-raised for menus/popovers,
 *    --surface-overlay for modals/dialogs, --scrim for modal backdrops.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --surface-base:      var(--background);
  --surface-raised:    #1C1C24;
  --surface-overlay:   #22222B;
  --scrim:             rgba(0, 0, 0, 0.55);

  --shadow-popover:    0 8px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-modal:      0 24px 64px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  --shadow-toast:      0 12px 32px rgba(0,0,0,0.40);
}

:root.light {
  --surface-raised:    #FFFFFF;
  --surface-overlay:   #FFFFFF;
  --scrim:             rgba(17, 17, 20, 0.40);

  --shadow-popover:    0 8px 24px rgba(17,17,20,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-modal:      0 24px 64px rgba(17,17,20,0.18), 0 1px 0 rgba(255,255,255,0.8) inset;
  --shadow-toast:      0 12px 32px rgba(17,17,20,0.12);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 3. Semantic colors
 *    Indigo is `--info`. Warning + danger added. All four are AA-safe on
 *    --surface and --surface-soft in both light and dark.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --info:              var(--accent);
  --info-dim:          var(--accent-dim);

  --warning:           #FBBF24;
  --warning-dim:       rgba(251, 191, 36, 0.14);

  --danger:            #F87171;
  --danger-dim:        rgba(248, 113, 113, 0.14);

  --success-dim:       rgba(52, 211, 153, 0.14);
}
:root.light {
  --warning:           #D97706;
  --warning-dim:       rgba(217, 119, 6, 0.10);
  --danger:            #DC2626;
  --danger-dim:        rgba(220, 38, 38, 0.10);
  --success-dim:       rgba(5, 150, 105, 0.10);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 4. Categorical chart palette
 *    Indigo-first, then four siblings that harmonize. Use for chart series,
 *    categorical tags, multi-bucket metrics. Tuned for dark backgrounds;
 *    light overrides drop saturation slightly to keep things calm.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --chart-1:           #8B82FF;  /* indigo (accent) */
  --chart-2:           #34D399;  /* emerald */
  --chart-3:           #FBBF24;  /* amber */
  --chart-4:           #F87171;  /* rose */
  --chart-5:           #38BDF8;  /* sky */
  --chart-6:           #C084FC;  /* violet */
  --chart-7:           #A3A3A3;  /* neutral */
}
:root.light {
  --chart-1:           #4338CA;
  --chart-2:           #059669;
  --chart-3:           #D97706;
  --chart-4:           #DC2626;
  --chart-5:           #0284C7;
  --chart-6:           #9333EA;
  --chart-7:           #525252;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 5. Motion — faster, quieter
 *    In-app interactions feel snappy at ~100ms; reserve longer durations for
 *    full-pane transitions like modal opens.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --app-duration-fast:    100ms;
  --app-duration-medium:  160ms;
  --app-duration-slow:    240ms;
  --app-ease:             cubic-bezier(.2, .8, .2, 1);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 6. Density modes
 *    Default = comfortable. Add `data-density="compact"` to the app shell
 *    (or any subtree) to shrink padding/line-heights for power users.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --row-h:             40px;   /* table row */
  --pad-y:             10px;
  --pad-x:             14px;
  --gap:               16px;
}
[data-density="compact"] {
  --row-h:             32px;
  --pad-y:             6px;
  --pad-x:             10px;
  --gap:               12px;
}
[data-density="cozy"] {
  --row-h:             48px;
  --pad-y:             14px;
  --pad-x:             18px;
  --gap:               20px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 7. Dense type scale (.app-*)
 *    These coexist with marketing's .t-* scale; never mix the two in one
 *    surface. Page titles in-app cap at 22–28px.
 * ────────────────────────────────────────────────────────────────────────── */
.app-display { font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; font-variation-settings: "opsz" 100; color: var(--text); }
.app-h1      { font-family: var(--font-serif); font-weight: 600; font-size: 22px; line-height: 1.20; letter-spacing: -0.018em; font-variation-settings: "opsz" 100; color: var(--text); }
.app-h2      { font-family: var(--font-sans);  font-weight: 600; font-size: 17px; line-height: 1.30; letter-spacing: -0.005em; color: var(--text); }
.app-h3      { font-family: var(--font-sans);  font-weight: 600; font-size: 14px; line-height: 1.40; color: var(--text); }
.app-body    { font-family: var(--font-sans);  font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--text); }
.app-body-2  { font-family: var(--font-sans);  font-weight: 400; font-size: 13px; line-height: 1.50; color: var(--text-2); }
.app-meta    { font-family: var(--font-sans);  font-weight: 400; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.app-micro   {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; line-height: 1.20;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.app-tabular {
  font-family: var(--font-sans); font-size: 13px;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--text);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 8. Reset that respects app aesthetics
 *    The marketing body sets 16/1.6. App body wants 14/1.55 by default.
 * ────────────────────────────────────────────────────────────────────────── */
body.app, .app-root {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  background: var(--background);
  color: var(--text);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 9. Focus rings
 *    Visible on every surface level.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --ring: 0 0 0 2px var(--background), 0 0 0 4px var(--accent);
}
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-md);
}