/*
 * Albomara web brand tokens — the same palette the Android app uses
 * (android/.../ui/theme/Color.kt, chosen per logo.md: vibrant sunset coral
 * primary, the original deep teal demoted to secondary, golden amber
 * tertiary, warm neutrals instead of pure white/grey). Custom properties
 * only — each namespace stylesheet (dashboard/join/admin/legal) stays
 * self-contained rule-wise but reads its colors from here so web and app
 * can never drift apart. Propshaft bundles this alongside the others
 * (stylesheet_link_tag :app bundles every *.css under app/assets).
 */

:root {
  /* Coral — primary */
  --coral: #e85843;
  --coral-dark: #c43f2c;
  --coral-deep: #7d2c1c;
  --coral-container: #ffdad3;
  --on-coral-container: #5f1608;

  /* Deep teal — secondary (the original Albomara brand color) */
  --teal: #1b4b5a;
  --teal-dark: #05303d;
  --teal-light: #7fb3c2;
  --teal-container: #cde7f0;
  --on-teal-container: #05303d;

  /* Golden amber — tertiary */
  --amber: #edc148;
  --amber-deep: #a96f1f;
  --amber-container: #ffe8b4;
  --on-amber-container: #3f2e00;

  /* Warm neutrals */
  --bg: #fff8f6;
  --surface: #ffffff;
  --ink: #221a18;
  --ink-soft: #534340;
  --ink-faint: #85736f;
  --outline: #ead9d4;
  --outline-strong: #d8c2bd;

  /* Semantic (success stays green for clarity; errors use the coral family,
     matching Android's errorContainer treatment) */
  --success-container: #dcf0e0;
  --on-success-container: #14532d;
  --error-container: #ffdad3;
  --on-error-container: #5f1608;

  /* Shape & elevation — rounded and soft, warm-tinted shadows */
  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-l: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(95, 22, 8, 0.07), 0 1px 2px rgba(95, 22, 8, 0.05);
  --shadow-2: 0 6px 16px rgba(95, 22, 8, 0.1), 0 2px 4px rgba(95, 22, 8, 0.06);
  --shadow-3: 0 16px 40px rgba(95, 22, 8, 0.16);

  /* Gradients — the "fun" layer */
  --grad-sunset: linear-gradient(135deg, #e85843, #edc148);
  --grad-wash: linear-gradient(180deg, #ffe3dc 0%, #fff8f6 65%);
  --grad-nav: linear-gradient(105deg, #05303d, #1b4b5a);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The inline-SVG photo-stack mark (shared/_brand_mark.html.erb) scales with
   the font size of whatever it sits in; contexts size it via width/height. */
.brand-mark {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.35em;
  flex-shrink: 0;
}