/*
 * Untitled Project 1 — Shared Styles
 * Generated by UXMagic Copilot
 */

/* ── Theme 1: coinbase-sign-in, coinbase-credential-recognition-error ── */
[data-page="coinbase-sign-in"],
[data-page="coinbase-credential-recognition-error"] {
  --background: #ffffff;
  --foreground: #0a0b0d;
  --primary: #1460ff;
  --primary-foreground: #ffffff;
  --secondary: #f0f0f0;
  --secondary-foreground: #0a0b0d;
  --tertiary: #5b616e;
  --muted: #f0f0f0;
  --muted-foreground: #6D6D6E;
  --accent: #5b616e;
  --destructive: #ef4444;
  --card: #eef0f3;
  --card-foreground: #0a0b0d;
  --border: #0052ff;
  --input: #0052ff;
  --ring: #1460ff;
  --radius: 24px;
  --font-sans: Inter, sans-serif;
  --font-heading: Inter, sans-serif;
  --font-mono: JetBrains Mono, monospace;
  --shadow-offset-x: 0;
  --shadow-offset-y: 10;
  --shadow-blur: 30;
  --shadow-spread: -8;
  --shadow-color: rgba(15, 23, 42, 0.12);
  --accent-foreground: #DADCDF;
  --tertiary-foreground: #DADCDF;
  --destructive-foreground: #0A0B0D;
  --primary-text: #125FFD;
  --secondary-text: #6E6D6D;
  --tertiary-text: #5B616E;
  --accent-text: #5B616E;
  --destructive-text: #D3242D;
}

/* ── Theme 2: independent-account-registration, registration-review-confirmation ── */
[data-page="independent-account-registration"],
[data-page="registration-review-confirmation"] {
  --background: #F8FAFC;
  --foreground: #172033;
  --primary: #2E5BFF;
  --primary-foreground: #FFFFFF;
  --secondary: #EAF0FF;
  --secondary-foreground: #172033;
  --tertiary: #0F766E;
  --muted: #EEF2F7;
  --muted-foreground: #5E6B7E;
  --accent: #DCE8FF;
  --accent-foreground: #172033;
  --card: #FFFFFF;
  --card-foreground: #172033;
  --destructive: #C2410C;
  --border: #C9D4E5;
  --input: #AEBBD0;
  --ring: #2E5BFF;
  --radius: 16px;
  --font-sans: Inter, sans-serif;
  --font-heading: Inter, sans-serif;
  --font-mono: JetBrains Mono, monospace;
  --shadow-offset-x: 0;
  --shadow-offset-y: 10;
  --shadow-blur: 30;
  --shadow-spread: -8;
  --shadow-color: rgba(15, 23, 42, 0.12);
  --tertiary-foreground: #FFFFFF;
  --destructive-foreground: #FFFFFF;
  --primary-text: #2E5BFF;
  --secondary-text: #6E7381;
  --tertiary-text: #0F766E;
  --accent-text: #697488;
  --destructive-text: #C2410C;
}

/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ── Coinbase - Sign in page-specific styles ── */
[data-page="coinbase-sign-in"] .brand-gradient { background-image: linear-gradient(135deg, var(--primary), var(--accent)); }

[data-page="coinbase-sign-in"] .shadow-theme {
        box-shadow:
          calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
          calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
          var(--shadow-color, rgba(15, 23, 42, 0.12));
      }

[data-page="coinbase-sign-in"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="coinbase-sign-in"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="coinbase-sign-in"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary { color: var(--primary-text, var(--primary)); }

[data-page="coinbase-sign-in"] .text-secondary { color: var(--secondary-text, var(--secondary)); }

[data-page="coinbase-sign-in"] .text-tertiary { color: var(--tertiary-text, var(--tertiary)); }

[data-page="coinbase-sign-in"] .text-accent { color: var(--accent-text, var(--accent)); }

[data-page="coinbase-sign-in"] .text-destructive { color: var(--destructive-text, var(--destructive)); }

[data-page="coinbase-sign-in"] .brand-gradient { background-image: linear-gradient(135deg, var(--primary), var(--accent)); }

[data-page="coinbase-sign-in"] .shadow-theme {
        box-shadow:
          calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
          calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
          var(--shadow-color, rgba(15, 23, 42, 0.12));
      }

[data-page="coinbase-sign-in"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="coinbase-sign-in"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="coinbase-sign-in"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary { color: var(--primary-text, var(--primary)); }

[data-page="coinbase-sign-in"] .text-secondary { color: var(--secondary-text, var(--secondary)); }

[data-page="coinbase-sign-in"] .text-tertiary { color: var(--tertiary-text, var(--tertiary)); }

[data-page="coinbase-sign-in"] .text-accent { color: var(--accent-text, var(--accent)); }

[data-page="coinbase-sign-in"] .text-destructive { color: var(--destructive-text, var(--destructive)); }

/* ── Coinbase - Credential recognition error page-specific styles ── */
[data-page="coinbase-credential-recognition-error"] .brand-gradient { background-image: linear-gradient(135deg, var(--primary), var(--accent)); }

[data-page="coinbase-credential-recognition-error"] .shadow-theme {
        box-shadow:
          calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
          calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
          var(--shadow-color, rgba(15, 23, 42, 0.12));
      }

[data-page="coinbase-credential-recognition-error"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="coinbase-credential-recognition-error"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="coinbase-credential-recognition-error"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary { color: var(--primary-text, var(--primary)); }

[data-page="coinbase-credential-recognition-error"] .text-secondary { color: var(--secondary-text, var(--secondary)); }

[data-page="coinbase-credential-recognition-error"] .text-tertiary { color: var(--tertiary-text, var(--tertiary)); }

[data-page="coinbase-credential-recognition-error"] .text-accent { color: var(--accent-text, var(--accent)); }

[data-page="coinbase-credential-recognition-error"] .text-destructive { color: var(--destructive-text, var(--destructive)); }

/* ── Independent account registration page-specific styles ── */
[data-page="independent-account-registration"] .brand-gradient { background-image: linear-gradient(135deg, var(--primary), var(--accent)); }

[data-page="independent-account-registration"] .shadow-theme {
        box-shadow:
          calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
          calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
          var(--shadow-color, rgba(15, 23, 42, 0.12));
      }

[data-page="independent-account-registration"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="independent-account-registration"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="independent-account-registration"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary { color: var(--primary-text, var(--primary)); }

[data-page="independent-account-registration"] .text-secondary { color: var(--secondary-text, var(--secondary)); }

[data-page="independent-account-registration"] .text-tertiary { color: var(--tertiary-text, var(--tertiary)); }

[data-page="independent-account-registration"] .text-accent { color: var(--accent-text, var(--accent)); }

[data-page="independent-account-registration"] .text-destructive { color: var(--destructive-text, var(--destructive)); }

[data-page="independent-account-registration"] .brand-gradient { background-image: linear-gradient(135deg, var(--primary), var(--accent)); }

[data-page="independent-account-registration"] .shadow-theme {
        box-shadow:
          calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
          calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
          var(--shadow-color, rgba(15, 23, 42, 0.12));
      }

[data-page="independent-account-registration"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="independent-account-registration"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="independent-account-registration"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary { color: var(--primary-text, var(--primary)); }

[data-page="independent-account-registration"] .text-secondary { color: var(--secondary-text, var(--secondary)); }

[data-page="independent-account-registration"] .text-tertiary { color: var(--tertiary-text, var(--tertiary)); }

[data-page="independent-account-registration"] .text-accent { color: var(--accent-text, var(--accent)); }

[data-page="independent-account-registration"] .text-destructive { color: var(--destructive-text, var(--destructive)); }

/* ── Registration review confirmation page-specific styles ── */
[data-page="registration-review-confirmation"] .brand-gradient { background-image: linear-gradient(135deg, var(--primary), var(--accent)); }

[data-page="registration-review-confirmation"] .shadow-theme {
        box-shadow:
          calc(var(--shadow-offset-x, 0) * 1px) calc(var(--shadow-offset-y, 10) * 1px)
          calc(var(--shadow-blur, 30) * 1px) calc(var(--shadow-spread, -8) * 1px)
          var(--shadow-color, rgba(15, 23, 42, 0.12));
      }

[data-page="registration-review-confirmation"] /* Brand colours used as TEXT resolve to a legibility-adjusted variant.
       *
       * --primary and friends are tuned to look right as FILLS; painted as text
       * on the page they are routinely too light — a #16A34A "+8.4%" on a white
       * card measures 3.3:1. The --*-text tokens are the same hue and chroma
       * with lightness nudged just far enough to clear AA on the page and card
       * surfaces,
[data-page="registration-review-confirmation"] so fills keep the exact brand colour while text becomes
       * readable.
       *
       * This block is intentionally UNLAYERED: unlayered declarations outrank
       * every cascade layer,
[data-page="registration-review-confirmation"] so these beat Tailwind's own text-* utilities. The
       * var() fallbacks leave documents that predate the derived tokens
       * rendering exactly as before.
       */
      .text-primary { color: var(--primary-text, var(--primary)); }

[data-page="registration-review-confirmation"] .text-secondary { color: var(--secondary-text, var(--secondary)); }

[data-page="registration-review-confirmation"] .text-tertiary { color: var(--tertiary-text, var(--tertiary)); }

[data-page="registration-review-confirmation"] .text-accent { color: var(--accent-text, var(--accent)); }

[data-page="registration-review-confirmation"] .text-destructive { color: var(--destructive-text, var(--destructive)); }