/*
  Design tokens — sourced from apps/web/colors_and_type.css
  Single source of truth for the Blan design system.
  Keep in sync with the web app.
*/

@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap");

:root {
  /* Neutrals */
  --color-white:       rgb(255, 255, 255);
  --color-neutral-50:  rgb(250, 250, 250);
  --color-neutral-100: rgb(244, 244, 245);
  --color-neutral-200: rgb(228, 228, 231);
  --color-neutral-300: rgb(212, 212, 216);
  --color-neutral-400: rgb(161, 161, 170);
  --color-neutral-500: rgb(113, 113, 122);
  --color-neutral-600: rgb( 97, 102, 106);
  --color-neutral-700: rgb( 63,  63,  70);
  --color-neutral-800: rgb( 41,  44,  46);
  --color-neutral-850: rgb( 39,  39,  39);
  --color-neutral-900: rgb( 24,  24,  27);
  --color-neutral-950: rgb(  9,   9,  11);
  --color-black:       rgb(  0,   0,   0);
  --color-page-bg:     rgb(237, 236, 236);
  --color-ink-shadow:  rgb(  8,   8,   8);

  /* Brand Accent — Red-Orange */
  --color-accent-50:   rgb(255, 240, 235);
  --color-accent-100:  rgb(255, 213, 200);
  --color-accent-300:  rgb(255,  90,  60);
  --color-accent-500:  rgb(253,  58,  37);
  --color-accent-600:  rgb(234,  43,  22);
  --color-accent-glow: rgba(255, 59, 0, 0.25);

  /* Semantic tokens */
  --bg-page:          var(--color-page-bg);
  --bg-surface:       var(--color-white);
  --bg-surface-1:     var(--color-white);
  --bg-surface-2:     var(--color-neutral-100);
  --bg-surface-dark:  var(--color-neutral-900);
  --bg-surface-ink:   var(--color-neutral-850);

  --fg-primary:       var(--color-neutral-950);
  --fg-secondary:     var(--color-neutral-500);
  --fg-tertiary:      var(--color-neutral-600);
  --fg-on-dark:       var(--color-white);
  --fg-on-dark-muted: var(--color-neutral-400);
  --fg-accent:        var(--color-accent-500);

  --border-subtle:    var(--color-neutral-200);
  --border-default:   var(--color-neutral-300);
  --border-strong:    var(--color-neutral-700);

  /* Gradients */
  --gradient-accent:    linear-gradient(180deg, var(--color-accent-600) 0%, var(--color-accent-500) 100%);
  --gradient-dark-btn:  radial-gradient(rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 100%),
                        linear-gradient(rgb(39,39,39), rgb(39,39,39));
  --gradient-light-btn: radial-gradient(rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 100%),
                        linear-gradient(rgb(244,244,245), rgb(244,244,245));

  /* Shadows */
  --shadow-card:
    inset 0 4px 0 0 rgba(255,255,255,0.6),
    inset 0 -8px 0 0 rgba(0,0,0,0.05),
    0 3px 3px 0 rgba(0,0,0,0.10),
    0 7.77px 16px 0 rgba(0,0,0,0.06);

  --shadow-card-soft:
    inset 0 4px 0 0 rgba(255,255,255,0.6),
    inset 0 -8px 0 0 rgba(0,0,0,0.05),
    0 3px 3px 0 rgba(0,0,0,0.10),
    0 7.77px 16px 0 rgba(0,0,0,0.06);

  --shadow-btn-dark:
    0 100px 80px 0 rgba(0,0,0,0.15),
    0 41.78px 33.42px 0 rgba(0,0,0,0.15),
    0 22.34px 17.87px 0 rgba(0,0,0,0.14),
    0 12.52px 10.02px 0 rgba(0,0,0,0.133),
    0 6.65px 5.32px 0 rgba(0,0,0,0.13),
    0 3px 3px 0 rgba(0,0,0,0.14),
    0 2.77px 2.21px 0 rgba(0,0,0,0.12),
    inset 0 1px 0 0 rgba(255,255,255,0.3),
    inset 0 -3px 0 0 rgb(8,8,8);

  --shadow-btn-light:
    0 3px 3px 0 rgba(0,0,0,0.14),
    0 2.77px 2.21px 0 rgba(0,0,0,0.12),
    inset 0 1px 0 0 rgba(255,255,255,0.698),
    inset 0 -3px 0 0 rgb(233,233,233);

  --shadow-btn-accent:
    0 1px 2px 0 rgba(255,59,0,0.4),
    0 14px 34px 0 rgba(255,59,0,0.25),
    0 56px 83px 0 rgba(255,59,0,0.25),
    0 16.98px 27.47px 0 rgba(255,59,0,0.047),
    0 5.05px 8.18px 0 rgba(255,59,0,0.10),
    0 76px 123px 0 rgba(255,59,0,0.05),
    0 22.91px 37.08px 0 rgba(255,59,0,0.165),
    0 3.44px 5.57px 0 rgba(0,0,0,0.086);

  /* Radii */
  --radius-xs:   8px;
  --radius-sm:  16px;
  --radius-md:  24px;
  --radius-lg:  40px;
  --radius-pill: 999px;

  /* Spacing */
  --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;

  /* Type */
  --font-sans: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display-xl: 96px;
  --fs-display-lg: 72px;
  --fs-h1:  56px;
  --fs-h2:  40px;
  --fs-h3:  36px;
  --fs-h4:  28px;
  --fs-h5:  24px;
  --fs-h6:  20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --lh-display: 1.0;
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --tracking-display: -0.03em;
  --tracking-h:       -0.01em;
  --tracking-normal:   0;
}