/*
  Trusted Wallet design tokens
  ----------------------------
  Layer 1 (primitives): raw brand scales taken from the logo (navy shield,
  orange + green tricolour stroke). Do not use these directly in components.
  Layer 2 (semantic): what components consume. Change the theme here.

  Contrast notes (WCAG AA, checked against #fff unless stated):
  - --color-text            #081f49  16.4:1
  - --color-text-muted      #4d5e78   6.6:1
  - --color-accent-text     #b45400   5.0:1  (orange text on white)
  - --color-success-text    #086607   7.1:1
  - navy-900 text on orange-500 buttons  7.3:1
  - orange-500 on white is decorative only (2.1:1). Never use it for text.
*/

:root {
  /* ---------- Primitives: navy (primary) ---------- */
  --navy-50: #f0f4fb;
  --navy-100: #e1e9f7;
  --navy-200: #c3d3ef;
  --navy-300: #93afe0;
  --navy-400: #5b82c9;
  --navy-500: #2a5bb0;
  --navy-600: #144394;
  --navy-700: #0a3178;
  --navy-800: #062867;
  --navy-900: #051d59;
  --navy-950: #031238;

  /* ---------- Primitives: sky (theme surfaces) ---------- */
  --sky-50: #f5fbff;
  --sky-100: #e7f6ff;
  --sky-200: #c9ecff;
  --sky-300: #9ad8fb;
  --sky-400: #62bfef;
  --sky-500: #2f9fe0;

  /* ---------- Primitives: saffron orange (accent) ---------- */
  --orange-50: #fff7eb;
  --orange-100: #ffecd0;
  --orange-200: #ffd59a;
  --orange-300: #ffbb5c;
  --orange-400: #ffa42e;
  --orange-500: #ff960a;
  --orange-600: #f07c00;
  --orange-700: #b45400;
  --orange-800: #8a4b00;
  --orange-900: #5a3200;

  /* ---------- Primitives: green (success / growth) ---------- */
  --green-50: #edf9ec;
  --green-100: #d6f1d4;
  --green-200: #ace3a7;
  --green-300: #82d27b;
  --green-400: #4cb845;
  --green-500: #1f9a1a;
  --green-600: #0b8808;
  --green-700: #086607;
  --green-800: #064f06;

  /* ---------- Primitives: neutral (navy-tinted slate) ---------- */
  --neutral-0: #ffffff;
  --neutral-25: #fafbfd;
  --neutral-50: #f4f7fb;
  --neutral-100: #eaeff6;
  --neutral-200: #dde4ee;
  --neutral-300: #c2cede;
  --neutral-400: #93a3bb;
  --neutral-600: #4d5e78;
  --neutral-700: #3a4a63;
  --neutral-800: #24344d;
  --neutral-900: #081f49;

  /* ---------- Semantic: colour ---------- */
  --color-bg: var(--sky-50);
  --color-bg-subtle: #eef7fd;
  --color-bg-inverse: var(--navy-900);
  --color-bg-inverse-deep: var(--navy-950);
  --color-surface: var(--neutral-0);
  --color-surface-raised: var(--neutral-0);
  --color-surface-inverse: rgba(255, 255, 255, 0.06);

  --color-text: var(--neutral-900);
  --color-text-strong: var(--navy-900);
  --color-text-muted: var(--neutral-600);
  --color-text-body: var(--neutral-800);
  --color-text-inverse: var(--neutral-0);
  --color-text-inverse-muted: #c9d6ea;
  --color-text-inverse-subtle: #9fb0c8;

  --color-primary: #0c6eab;
  --color-primary-hover: #095889;
  --color-primary-soft: var(--sky-100);
  --color-link: #0c6eab;
  --color-link-hover: var(--orange-700);

  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-400);
  --color-accent-soft: var(--orange-50);
  --color-accent-text: var(--orange-700);
  --color-accent-on-dark: var(--orange-300);

  --color-success: var(--green-600);
  --color-success-soft: var(--green-50);
  --color-success-text: var(--green-700);

  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-inverse: rgba(255, 255, 255, 0.14);
  --color-focus: var(--orange-500);

  /* Text sitting on the light sky surfaces */
  --color-on-sky: #0b2a4a;
  --color-on-sky-muted: #2f4c66;
  --color-on-sky-subtle: #3a5670;
  --color-border-sky: rgba(11, 58, 110, 0.14);
  --color-surface-sky: rgba(255, 255, 255, 0.62);

  /* Brand gradient: the tricolour stroke from the logo */
  --gradient-brand: linear-gradient(90deg, var(--orange-500) 0%, var(--orange-400) 45%, var(--green-300) 100%);
  --gradient-hero:
    radial-gradient(820px 480px at 92% -8%, rgba(255, 255, 255, 0.95), transparent 58%),
    radial-gradient(640px 420px at 0% 110%, rgba(98, 191, 239, 0.55), transparent 62%),
    radial-gradient(420px 260px at 72% 78%, rgba(255, 186, 92, 0.2), transparent 62%),
    linear-gradient(155deg, #f8fdff 0%, #d7f1ff 48%, #8ecff8 100%);
  --gradient-footer:
    radial-gradient(700px 280px at 0% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(520px 240px at 100% 100%, rgba(47, 159, 224, 0.28), transparent 58%),
    linear-gradient(180deg, #e8f6ff 0%, #b7e4fb 100%);

  /* ---------- Typography ---------- */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-devanagari: "Noto Sans Devanagari", var(--font-body);

  /* 1.25 (major third) scale, base 16px */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md: 1.0625rem;  /* 17: body copy */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 1.875rem;  /* 30 */
  --text-3xl: 2.25rem;   /* 36 */

  /* Fluid headings: min at 360px viewport, max at 1200px */
  --text-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);
  --text-h2: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;

  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.08em;

  /* ---------- Spacing (4px base, 8pt rhythm) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  --space-section: clamp(3.5rem, 2rem + 6vw, 6rem);
  --gutter: 1.25rem;

  /* ---------- Sizing ---------- */
  --container: 1160px;
  --header-height: 76px;
  --control-sm: 40px;
  --control-md: 48px;
  --control-lg: 56px;
  --icon-sm: 20px;
  --icon-md: 24px;

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ---------- Elevation (navy-tinted, layered) ---------- */
  --shadow-xs: 0 1px 2px rgba(5, 29, 89, 0.06);
  --shadow-sm: 0 1px 2px rgba(5, 29, 89, 0.06), 0 2px 8px rgba(5, 29, 89, 0.05);
  --shadow-md: 0 2px 4px rgba(5, 29, 89, 0.05), 0 10px 24px rgba(5, 29, 89, 0.08);
  --shadow-lg: 0 4px 8px rgba(5, 29, 89, 0.05), 0 20px 48px rgba(5, 29, 89, 0.12);
  --shadow-xl: 0 8px 16px rgba(3, 18, 56, 0.12), 0 32px 80px rgba(3, 18, 56, 0.28);
  --shadow-accent: 0 8px 24px rgba(255, 150, 10, 0.32);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-header: 30;
  --z-skip: 40;
}