/* ============================================================
   tokens.css — XRPName v3 design tokens
   ------------------------------------------------------------
   Single source of truth for palette, type scale, spacing,
   radius, depth shadows.  Loaded BEFORE every other CSS so any
   rule downstream can use these vars.

   Two parallel namespaces are defined here:

     --v3-*  → used by app pages (search / mydomains / detail)
               via design.css, search.css, and component CSS.

     --*     → used by the landing page (default.html) inline
               <style> block.

   The two sets currently carry slightly different values for a
   few tokens (line, muted, ink-soft, radius, glass alpha) —
   intentionally divergent so the landing keeps its luxury-marketing
   feel while the app keeps its functional density.  When you want
   to unify them, swap the landing values to `var(--v3-*)` aliases.
   ============================================================ */

:root {

    /* ============================================================
       APP PALETTE (--v3-*)
       ============================================================ */
    --v3-bg:       #050608;
    --v3-bg-2:     #0a0c10;
    --v3-bg-3:     #0c0f15;
    --v3-bg-4:     #11151d;
    --v3-ink:      #ffffff;
    --v3-ink-soft: #e6ebf2;
    --v3-muted:    #a8b3c5;
    --v3-mute:     #6b7689;
    --v3-line:     #232a38;
    --v3-line-2:   #2f3849;

    /* App accents */
    --v3-accent:      #25aae1;
    --v3-accent-soft: #5dc8f0;
    --v3-violet:      #b08cff;
    --v3-green:       #5fe3a8;
    --v3-red:         #d96b6b;

    /* App glass surfaces */
    --v3-glass-bg:        rgba(12, 15, 21, 0.92);
    --v3-glass-bg-strong: rgba(14, 18, 28, 0.98);
    --v3-glass-border:    rgba(255, 255, 255, 0.14);
    --v3-glass-border-hi: rgba(255, 255, 255, 0.24);
    --v3-glass-edge-cyan: rgba(37, 170, 225, 0.18);

    /* App typography */
    --v3-display: "Satoshi", system-ui, -apple-system, sans-serif;
    --v3-sans:    "Satoshi", system-ui, -apple-system, sans-serif;
    --v3-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    --v3-track-caption: 0.08em;

    /* App layout + radius + easing */
    --v3-radius:    10px;
    --v3-radius-lg: 14px;
    --v3-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --v3-header-h:  64px;
    --v3-sidebar-w: 280px;

    /* App depth shadows */
    --v3-depth-1:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 1px 0 rgba(0, 0, 0, .35),
        0 4px 12px rgba(0, 0, 0, .35);
    --v3-depth-2:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 8px 24px rgba(0, 0, 0, .42),
        0 22px 48px rgba(0, 0, 0, .32);
    --v3-glow-cyan:
        0 0 0 1px var(--v3-glass-edge-cyan),
        0 0 22px rgba(37, 170, 225, .18);


    /* ============================================================
       LANDING PALETTE (--*)
       Used only by default.html inline styles.  Slightly different
       luminance + alpha values for marketing-luxe feel.
       ============================================================ */
    --bg:       #050608;
    --bg-2:     #0a0c10;
    --bg-3:     #0c0f15;
    --bg-4:     #11151d;
    --ink:      #ffffff;
    --ink-soft: #d4dae5;
    --muted:    #7a8599;
    --mute:     #4a5466;
    --line:     #1c222e;
    --line-2:   #2a3142;

    /* Landing accents */
    --accent:      #25aae1;
    --accent-soft: #5dc8f0;
    --cyan:        #25aae1;
    --cyan-soft:   #5dc8f0;
    --green:       #5fe3a8;
    --violet:      #b08cff;
    --orange:      #f78c4d;
    --red:         #d96b6b;

    /* Landing glass surfaces (lower alpha for the GL-backed look) */
    --glass-bg:          rgba(12, 15, 21, 0.55);
    --glass-bg-strong:   rgba(12, 15, 21, 0.78);
    --glass-border:      rgba(255, 255, 255, 0.06);
    --glass-border-hi:   rgba(255, 255, 255, 0.12);
    --glass-top:         rgba(255, 255, 255, 0.06);
    --glass-bot:         rgba(0, 0, 0, 0.32);
    --glass-edge-cyan:   rgba(37, 170, 225, 0.18);
    --glass-edge-violet: rgba(176, 140, 255, 0.14);

    /* Landing typography + scale */
    --display-font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sans:         "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --mega:    clamp(30px, 4.2vw, 56px);
    --display: clamp(22px, 2.6vw, 36px);
    --h3:      clamp(16px, 1.4vw, 20px);
    --body-lg: 15.5px;
    --body:    14.5px;
    --small:   12.5px;
    --caption: 10.5px;

    --track-mega:    -0.035em;
    --track-display: -0.025em;
    --track-caption: 0.08em;

    /* Landing spacing scale */
    --sp-4:  4px;
    --sp-8:  8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-48: 48px;
    --sp-64: 64px;
    --sp-80: 80px;

    --section-py: clamp(64px, 8vh, 96px);
    --container:  1240px;
    --gutter:     clamp(18px, 3vw, 40px);

    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-quick: cubic-bezier(0.32, 0.72, 0, 1);

    /* Landing depth shadows (use --glass-top/--glass-bot tokens) */
    --depth-1:
        0 1px 0 var(--glass-top) inset,
        0 1px 0 rgba(0, 0, 0, .35),
        0 4px 12px rgba(0, 0, 0, .35);
    --depth-2:
        0 1px 0 var(--glass-top) inset,
        0 -1px 0 var(--glass-bot) inset,
        0 1px 0 rgba(0, 0, 0, .5),
        0 8px 24px rgba(0, 0, 0, .42),
        0 22px 48px rgba(0, 0, 0, .32);
    --depth-3:
        0 1px 0 var(--glass-top) inset,
        0 -1px 0 var(--glass-bot) inset,
        0 0 0 1px var(--glass-edge-cyan),
        0 12px 32px rgba(0, 0, 0, .55),
        0 32px 72px rgba(0, 0, 0, .45);
    --depth-glow-cyan:
        0 1px 0 var(--glass-top) inset,
        0 0 0 1px var(--glass-edge-cyan),
        0 0 24px rgba(37, 170, 225, 0.15),
        0 12px 32px rgba(0, 0, 0, .5),
        0 32px 72px rgba(0, 0, 0, .4);
    --depth-glow-violet:
        0 1px 0 var(--glass-top) inset,
        0 0 0 1px var(--glass-edge-violet),
        0 0 24px rgba(176, 140, 255, 0.13),
        0 12px 32px rgba(0, 0, 0, .5),
        0 32px 72px rgba(0, 0, 0, .4);
}