/* ============================================================
   FNRB Design System — Colors & Type
   ============================================================
   Source of truth: styles/colors.ts (React Native tokens)
   converted to CSS custom properties.

   Use the SEMANTIC vars (--fg-1, --bg-1, --h1, --p) in product
   code; the BASE vars (--orange-500, etc.) are exposed for when
   you really need a raw hue.
   ============================================================ */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "Quicksand";
  src: url("../assets/fonts/Quicksand-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../assets/fonts/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../assets/fonts/Quicksand-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../assets/fonts/Quicksand-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../assets/fonts/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =====================================================
     BASE COLORS — raw palette
     ===================================================== */

  /* Brand orange — primary actions, sent messages, CTAs */
  --orange-400: #F08833;
  --orange-500: #F97316;   /* default */
  --orange-600: #EA580C;   /* pressed */
  --orange-glow: rgba(249, 115, 22, 0.10);
  --orange-ripple: rgba(249, 115, 22, 0.30);

  /* Brand light blue / teal — secondary, received messages, links */
  --blue-lighter: #9DCBDD;
  --blue-light:   #8FC9E0;
  --blue-main:    #6FBCD9;
  --blue-dark:    #45A9D0;
  --blue-darker:  #2C9FCC;

  /* Logo accent teals (from SVG glyph) */
  --teal-deep: #2998AA;
  --teal-mid:  #24B3D2;
  --teal-pale: #51BEDD;

  /* Logo accent reds (from SVG glyph) */
  --red-deep:  #B12409;
  --red-mid:   #E6481B;
  --red-pale:  #F28548;

  /* Greyscale ink */
  --white: #FFFFFF;
  --ink-100: #D9D9D9;   /* secondary text */
  --ink-300: #A5B4C3;   /* muted text */
  --ink-500: #263038;   /* default border */
  --ink-700: #1D212C;   /* muted surface */
  --ink-800: #191E28;   /* surface */
  --ink-900: #12161D;   /* background */

  /* Status */
  --status-online:  #10B981;
  --status-offline: #6B7280;
  --status-typing:  #9CA3AF;
  --status-error:   #EF4444;
  --status-warning: #F59E0B;
  --status-success: #79C340;

  /* =====================================================
     SEMANTIC COLORS — use these in product code
     ===================================================== */

  /* Surfaces */
  --bg-1: #12161D;                   /* app background */
  --bg-2: #191E28;                   /* surface / cards */
  --bg-3: #1D212C;                   /* muted / disabled / pressed-bg */
  --bg-gradient-start:  #12161D;
  --bg-gradient-middle: #1A1E28;
  --bg-gradient-end:    #1D212C;
  --bg-glass: rgba(19, 24, 28, 0.90);
  --bg-overlay: rgba(0, 0, 0, 0.50);

  /* Foreground / text */
  --fg-1: #FFFFFF;                   /* primary text */
  --fg-2: #D9D9D9;                   /* secondary */
  --fg-3: #A5B4C3;                   /* muted / placeholder */
  --fg-inverse: #101417;             /* on light bg */
  --fg-link: #6FBCD9;                /* same as primary brand blue */

  /* Borders */
  --border-1: #263038;               /* default */
  --border-2: rgba(48, 61, 70, 0.20);/* light */
  --border-3: rgba(38, 48, 56, 0.40);/* medium */
  --border-active: rgba(255, 255, 255, 0.14);

  /* Brand action / accent */
  --accent: #F97316;                 /* primary brand action */
  --accent-pressed: #EA580C;
  --accent-disabled: #F08833;
  --accent-soft: rgba(249, 115, 22, 0.10);
  --secondary: #6FBCD9;              /* labels, links, verified */

  /* Message bubbles */
  --bubble-sent-from: #ED6C0A;
  --bubble-sent-to:   #EA580C;
  --bubble-recv-from: #2D96BF;
  --bubble-recv-to:   #2690B8;
  --bubble-system:    rgba(29, 36, 43, 0.30);

  /* =====================================================
     SPACING (px)
     ===================================================== */
  --sp-xxs: 2px;
  --sp-xs:  4px;
  --sp-smm: 6px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;
  --sp-4xl: 64px;

  /* =====================================================
     RADIUS
     ===================================================== */
  --radius-none: 0;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* =====================================================
     SHADOW / ELEVATION
     ===================================================== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.10);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.20);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.25);
  --shadow-glow-orange: 0 0 24px rgba(249, 115, 22, 0.18);
  --shadow-glow-blue:   0 0 24px rgba(111, 188, 217, 0.18);

  /* =====================================================
     ICON SIZES
     ===================================================== */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 19px;
  --icon-ml: 22px;
  --icon-lg: 24px;
  --icon-xl: 28px;
  --icon-2xl: 32px;
  --icon-3xl: 40px;

  /* =====================================================
     TYPOGRAPHY — base scale
     ===================================================== */
  --font-sans: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

  --fs-xxs:    13px;
  --fs-xs:     14px;
  --fs-sm:     16px;
  --fs-bubble: 16.5px;
  --fs-base:   18px;
  --fs-lg:     20px;
  --fs-xl:     22px;
  --fs-2xl:    28px;
  --fs-3xl:    34px;
  --fs-4xl:    44px;   /* extrapolated for marketing/heros */
  --fs-5xl:    56px;   /* extrapolated for marketing/heros */

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* =====================================================
     SEMANTIC TYPOGRAPHY — type roles
     Use these as shorthand:  font: var(--type-h1);
     ===================================================== */
  --type-display: var(--fw-bold)     var(--fs-5xl)/var(--lh-tight)   var(--font-sans);
  --type-h1:      var(--fw-bold)     var(--fs-3xl)/var(--lh-tight)   var(--font-sans);
  --type-h2:      var(--fw-bold)     var(--fs-2xl)/var(--lh-tight)   var(--font-sans);
  --type-h3:      var(--fw-semibold) var(--fs-xl)/var(--lh-tight)    var(--font-sans);
  --type-h4:      var(--fw-semibold) var(--fs-lg)/var(--lh-normal)   var(--font-sans);
  --type-body:    var(--fw-regular)  var(--fs-base)/var(--lh-normal) var(--font-sans);
  --type-body-sm: var(--fw-regular)  var(--fs-sm)/var(--lh-normal)   var(--font-sans);
  --type-label:   var(--fw-medium)   var(--fs-lg)/var(--lh-tight)    var(--font-sans);
  --type-button:  var(--fw-semibold) var(--fs-xl)/1                  var(--font-sans);
  --type-caption: var(--fw-medium)   var(--fs-xxs)/var(--lh-normal)  var(--font-sans);
  --type-mono:    var(--fw-regular)  var(--fs-xs)/var(--lh-normal)   var(--font-mono);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 500ms;
}

/* ============================================================
   ELEMENT DEFAULTS — apply to product surfaces by default
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-h1); color: var(--fg-1); margin: 0 0 var(--sp-md); }
h2 { font: var(--type-h2); color: var(--fg-1); margin: 0 0 var(--sp-md); }
h3 { font: var(--type-h3); color: var(--fg-1); margin: 0 0 var(--sp-sm); }
h4 { font: var(--type-h4); color: var(--fg-1); margin: 0 0 var(--sp-sm); }
p  { font: var(--type-body); color: var(--fg-2); margin: 0 0 var(--sp-md); }
small { font: var(--type-caption); color: var(--fg-3); }
code, pre { font: var(--type-mono); color: var(--fg-2); }
a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--blue-dark); }

/* The signature FNRB gradient bg */
.fnrb-bg-gradient {
  background:
    linear-gradient(180deg,
      var(--bg-gradient-start) 0%,
      var(--bg-gradient-middle) 55%,
      var(--bg-gradient-end) 100%);
}