/* Sailors Connect — bundled token styles for standalone hosting */

/* ===== tokens/fonts.css ===== */
/* Sailors Connect — webfonts.
   The app (FlutterFlow) renders headings in Inter Tight (w600) and body in
   Inter. The marketing wordmark on the splash is a handwritten signature
   script — no font file was provided, so it is SUBSTITUTED with the closest
   Google Fonts match, "Dancing Script". Flag to brand owner if exact match needed. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=Dancing+Script:wght@500;600;700&display=swap");


/* ===== tokens/colors.css ===== */
/* Sailors Connect — color system.
   Sourced from the FlutterFlow theme (flutter_flow_theme.dart) plus the brand
   logo/splash. The app runs primarily in DARK mode over a deep ocean-navy
   ground; marketing surfaces use the turquoise ocean + light variants. */
:root {
  /* ---- Brand palette (base) ---- */
  --sc-indigo-500: #4b39ef; /* primary — buttons, icons, active nav */
  --sc-indigo-600: #3a2bc9;
  --sc-indigo-700: #2a1f96;
  --sc-indigo-100: #e4e1fd;
  --sc-indigo-soft: rgba(75, 57, 239, 0.30); /* card glow borders / accent1 */

  --sc-teal-400: #39d2c0; /* secondary — "Best Value", AI accents */
  --sc-teal-600: #249689; /* success / deep teal */
  --sc-orange-400: #ee8b60; /* tertiary — terms, warm accents */

  --sc-sky-200: #a9d5e6; /* light-blue CTA pill (Set Sails / Confirm & Save) */
  --sc-sky-300: #8ec6dc;

  --sc-gold-400: #f9cf58; /* rating stars / warning */
  --sc-red-400: #ff5963;  /* destructive / error */

  /* ---- Ocean (brand imagery + wordmark) ---- */
  --sc-ocean-400: #5bc8d4; /* turquoise surf */
  --sc-ocean-600: #2a8c9b;
  --sc-ocean-ink: #154c57; /* dark teal — splash script color */

  /* ---- Dark neutrals (primary app surface) ---- */
  --sc-ink-950: #0a0f14; /* deepest — list cards on home */
  --sc-ink-900: #0d1419; /* page ground */
  --sc-ink-850: #11181e;
  --sc-ink-800: #14181b; /* secondaryBackground */
  --sc-ink-750: #1a2228;
  --sc-ink-700: #1d2428; /* primaryBackground (dark) */
  --sc-ink-600: #262d34; /* alternate (dark) — dividers, tracks */

  /* ---- Light neutrals (marketing / light surfaces) ---- */
  --sc-paper: #ffffff;
  --sc-paper-alt: #f1f4f8; /* primaryBackground (light) */
  --sc-line-light: #e0e3e7; /* alternate (light) */

  /* ---- Text ---- */
  --sc-white: #ffffff;
  --sc-text-dim: #95a1ac;  /* secondaryText (dark) */
  --sc-text-mute: #57636c; /* secondaryText (light) */
  --sc-ink: #14181b;       /* primaryText (light) */

  /* ================= SEMANTIC ALIASES ================= */
  --sc-primary: var(--sc-indigo-500);
  --sc-secondary: var(--sc-teal-400);
  --sc-tertiary: var(--sc-orange-400);
  --sc-cta: var(--sc-sky-200);
  --sc-star: var(--sc-gold-400);
  --sc-success: var(--sc-teal-600);
  --sc-warning: var(--sc-gold-400);
  --sc-danger: var(--sc-red-400);

  /* Surfaces — default to the dark app theme */
  --surface-page: var(--sc-ink-900);
  --surface-card: var(--sc-ink-950);
  --surface-raised: var(--sc-ink-750);
  --surface-track: var(--sc-ink-600);
  --border-card: rgba(75, 57, 239, 0.35);
  --border-soft: rgba(255, 255, 255, 0.08);

  --text-heading: var(--sc-white);
  --text-body: var(--sc-white);
  --text-muted: var(--sc-text-dim);
  --on-primary: var(--sc-white);
  --on-cta: var(--sc-ink); /* dark text on the light-blue CTA */

  /* Page gradient ground used behind app screens */
  --sc-grad-page: linear-gradient(180deg, #0d1c26 0%, #0a0f14 55%); /* @kind color */
  /* Header banner overlay (darkens the ocean photo for legible titles) */
  --sc-grad-banner: linear-gradient(180deg, rgba(10,15,20,0) 30%, rgba(10,15,20,0.55) 100%); /* @kind color */
}


/* ===== tokens/typography.css ===== */
/* Sailors Connect — typography scale.
   Display/headings: Inter Tight (semibold, w600). Body/labels: Inter (regular).
   Scale mirrors the FlutterFlow Material text theme. */
:root {
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-script: "Dancing Script", cursive; /* wordmark substitute */

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Display (Inter Tight, w600) */
  --text-display-lg: 64px;
  --text-display-md: 44px;
  --text-display-sm: 36px;

  /* Headline (Inter Tight, w600) */
  --text-headline-lg: 32px;
  --text-headline-md: 28px;
  --text-headline-sm: 24px;

  /* Title (Inter Tight, w600) */
  --text-title-lg: 20px;
  --text-title-md: 18px;
  --text-title-sm: 16px;

  /* Label (Inter, regular) */
  --text-label-lg: 16px;
  --text-label-md: 14px;
  --text-label-sm: 12px;

  /* Body (Inter, regular) */
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 12px;

  --leading-tight: 1.15;
  --leading-normal: 1.4;
  --leading-relaxed: 1.55;
}


/* ===== tokens/spacing.css ===== */
/* Sailors Connect — spacing scale (FFSpacing). */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}


/* ===== tokens/effects.css ===== */
/* Sailors Connect — radii & elevation (FFRadius + FFShadows). */
:root {
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows — soft black, low alpha (matches FF FFShadows) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 25px rgba(0, 0, 0, 0.10);

  /* Indigo focus glow used on emphasized cards / inputs */
  --glow-primary: 0 0 0 1px rgba(75, 57, 239, 0.45), 0 0 16px rgba(75, 57, 239, 0.25);
}