/* RYLA — site styles (flattened from design system tokens) */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

/* ---- tokens/colors.css ---- */
:root {
  /* ---- Base palette (sourced from real ryla.app marketing build) ---- */

  /* Blue — primary brand accent */
  --blue-50:  #EFF3FF;
  --blue-100: #DCE6FF;
  --blue-200: #B9CDFF;
  --blue-300: #8FADFF;
  --blue-400: #5E8AFB;
  --blue-500: #386BF6; /* core brand blue, from source */
  --blue-600: #2D5AD4; /* source hover */
  --blue-700: #2647AC;
  --blue-800: #203A87;
  --blue-900: #1B2F6B;

  /* Ink — cool neutrals (matches source: ink/body/muted/line) */
  --ink-0:   #FFFFFF;
  --ink-25:  #FBFCFE;
  --ink-50:  #F6F7FA;
  --ink-100: #E9EAEE;
  --ink-200: #D6DBEA;
  --ink-300: #B7BCC9;
  --ink-400: #8A8F98;
  --ink-500: #6B707C;
  --ink-600: #56555F;
  --ink-700: #3D3D5C;
  --ink-800: #23223F;
  --ink-900-solid: #15142B;
  --ink-950: #0F0E1F;

  /* Additional brand accents seen in source (used sparingly) */
  --cyan-500: #00B4DD;
  --green-500: #00A557;

  /* ---- Semantic aliases ---- */
  --brand: var(--blue-500);
  --brand-hover: var(--blue-600);
  --brand-active: var(--blue-700);
  --brand-tint: var(--blue-50);
  --brand-tint-strong: var(--blue-100);

  --surface-page: var(--ink-0);
  --surface-page-alt: var(--ink-50);
  --surface-card: var(--ink-0);
  --surface-sunken: var(--ink-50);
  --surface-inverse: var(--ink-900-solid);
  --surface-overlay: rgba(15, 14, 31, 0.55);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-inverse: rgba(255, 255, 255, 0.14);

  --text-primary: var(--ink-900-solid);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-400);
  --text-on-brand: #FFFFFF;
  --text-on-inverse: var(--ink-0);
  --text-on-inverse-secondary: #C7C9D9;
  --text-link: var(--blue-600);

  --focus-ring: var(--blue-400);
}

/* ---- tokens/typography.css ---- */
:root {
  --font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Display / marketing headings — Poppins, bold, tight tracking */
  --display-2xl: 700 clamp(3rem, 2.35rem + 2.8vw, 4.25rem)/1.08 var(--font-display);
  --display-xl:  700 clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem)/1.12 var(--font-display);
  --display-lg:  700 clamp(1.875rem, 1.6rem + 1vw, 2.375rem)/1.15 var(--font-display);

  /* UI headings */
  --heading-lg: 700 1.75rem/1.24 var(--font-sans);
  --heading-md: 700 1.3125rem/1.3 var(--font-sans);
  --heading-sm: 700 1.125rem/1.35 var(--font-sans);

  /* Body */
  --body-lg: 500 1.156rem/1.55 var(--font-sans);
  --body-md: 500 1rem/1.55 var(--font-sans);
  --body-sm: 500 0.875rem/1.5 var(--font-sans);

  /* UI / controls */
  --label-md: 700 0.9375rem/1.3 var(--font-sans);
  --label-sm: 700 0.8125rem/1.3 var(--font-sans);
  --caption:  600 0.75rem/1.35 var(--font-sans);
  --overline: 700 0.78125rem/1.2 var(--font-sans);

  --tracking-tight: -0.022em;
  --tracking-normal: 0;
  --tracking-wide: 0.14em;
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 64px);
}

/* ---- tokens/effects.css ---- */
:root {
  /* Shadows — soft, low-contrast, cool-tinted (never pure black) */
  --shadow-xs: 0 1px 2px rgba(20, 22, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 22, 42, 0.07), 0 1px 2px rgba(20, 22, 42, 0.05);
  --shadow-md: 0 8px 20px rgba(20, 22, 42, 0.09), 0 2px 6px rgba(20, 22, 42, 0.05);
  --shadow-lg: 0 20px 44px rgba(20, 22, 42, 0.14), 0 6px 16px rgba(20, 22, 42, 0.07);
  --shadow-focus: 0 0 0 4px rgba(84, 142, 255, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */

  /* Gradients — subtle brand wash, never purple */
  --gradient-brand-wash: linear-gradient(135deg, #EFF5FF 0%, #FFFFFF 60%); /* @kind other */
  --gradient-brand-cta: radial-gradient(circle at 50% 30%, #5E8AFB 0%, #2647AC 75%); /* @kind other */
  --gradient-brand-navy: linear-gradient(135deg, #1A1A2E, #3D3D5C); /* @kind other */
}


/* ---- base ---- */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--surface-page);font-family:var(--font-sans);color:var(--text-primary)}img{max-width:100%}a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand-hover,var(--brand))}#root{opacity:0;transition:opacity .18s ease}#root.ready{opacity:1}