/* ============================================================
   EvryStay - Colors & Type Tokens
   ------------------------------------------------------------
   Source: extracted from Figma "EvryStay App Design - Final.fig"
   + uploaded brand notes. Primary palette is a purple → sky-blue
   gradient. Type pairs Outfit (body/subheadings) with
   Coluna Rounded (display/titles).
   ============================================================ */

/* ---------- FONTS ------------------------------------------- */
@font-face {
  font-family: "Coluna Rounded";
  src: url("./fonts/Coluna_Rounded.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coluna";
  src: url("./fonts/Coluna.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Outfit is EvryStay's workhorse - pulled from Google Fonts.
   Loaded via @import inside a <link> in HTML to avoid FOUT in CSS-only imports. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&display=swap");

:root {
  /* =========================================================
     COLOR - Brand
     --------------------------------------------------------- */
  /* Primary signature gradient - purple → sky-blue.
     User-provided: "linear-gradient of purple 9589FF 46% and blue A4D6F4 100%" */
  --evry-purple: #9589FF;       /* primary brand purple, gradient start */
  --evry-sky:    #A4D6F4;       /* brand sky-blue, gradient end */
  --evry-gradient: linear-gradient(135deg, #9589FF 46%, #A4D6F4 100%); /* @kind color */
  --evry-gradient-soft: linear-gradient(135deg, #B3ABFC 0%, #C7E4F7 100%); /* @kind color */

  /* Core purple scale (from Figma - 6858F9 is the "action" purple) */
  --purple-50:  #F7F6FF;
  --purple-100: #EEECFF;
  --purple-200: #D9D4FF;
  --purple-300: #C3BCFF;   /* rgb(195,188,255) - secondary accent */
  --purple-400: #B3ABFC;
  --purple-500: #9589FF;   /* brand purple */
  --purple-600: #6858F9;   /* primary action (most used UI purple) */
  --purple-700: #564AD1;
  --purple-800: #3F3599;

  /* Ink - the navy EvryStay uses for all body & headings (not pure black) */
  --ink-900: #1C274C;      /* rgb(28,39,76) - primary text */
  --ink-700: #3B3B3B;
  --ink-500: #9CA1AF;      /* rgb(156,156,156) - muted body */
  --ink-400: #A8ACB8;      /* secondary text */
  --ink-300: #D3D3D3;      /* placeholder text */

  /* Surface scale */
  --bg:        #FFFFFF;
  --bg-tinted: #FCFCFF;    /* dashboard canvas */
  --bg-soft:   #F7F6FF;    /* subtle purple tint */
  --surface-1: #F8F8F8;
  --surface-2: #F3F3F3;    /* pill inputs, chip bg */
  --surface-3: #F2F2F2;
  --border:    #E9E9EE;
  --hairline:  rgba(28,39,76,0.10);

  /* Semantic */
  --success:   #109519;    /* rgb(16,149,25) */
  --success-bg:#EAF7EC;
  --warn:      #FFA400;
  --warn-2:    #FF5E00;
  --danger:    #F76B6B;    /* alert red (3 alerts dot) */
  --danger-bg: #FFF6F6;
  --info:      #015064;    /* deep teal accent */
  --lime:      #90FF57;    /* success-on-dark accent */

  /* Overlays / glass */
  --glass-dark:   rgba(0,0,0,0.30);
  --glass-mid:    rgba(69,69,69,0.30);
  --glass-white:  rgba(255,255,255,0.20);
  --glass-white-strong: rgba(255,255,255,0.09);
  --backdrop-blur: 25px;

  /* Shadows - EvryStay layers very soft, wide shadows */
  --shadow-card:    0 0 12px rgba(0,0,0,0.06);
  --shadow-lift:    0 0 45px rgba(0,0,0,0.06);
  --shadow-ink:     0 4px 24px rgba(28,39,76,0.15);
  --shadow-ink-strong: 0 8px 32px rgba(28,39,76,0.23);
  --shadow-focus:   0 0 0 3px rgba(104,88,249,0.20);

  /* =========================================================
     RADII & SPACING
     --------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 29px;     /* dashboard cards - very signature */
  --r-pill: 999px;

  --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;

  /* =========================================================
     TYPE
     --------------------------------------------------------- */
  --font-display: "Coluna Rounded", "Coluna", "Fraunces", Georgia, serif;
  --font-sans:    "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale - reconstructed from Figma sizing clusters */
  --fs-display-xl: 115px;    /* hero wordmark ("HUB") */
  --fs-display-lg: 64px;
  --fs-display-md: 48px;
  --fs-display-sm: 32px;     /* page titles */
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 16px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-xs: 12px;
  --fs-tiny: 10px;

  --lh-tight: 1.0;      /* @kind other */
  --lh-snug: 1.15;      /* @kind other */
  --lh-normal: 1.35;    /* @kind other */
  --lh-relaxed: 1.5;    /* @kind other */

  --tracking-display: -0.01em;
  --tracking-ui: 0;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   --------------------------------------------------------- */
.display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-tight); color: var(--ink-900); letter-spacing: var(--tracking-display); }
.display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-lg); line-height: var(--lh-snug); color: var(--ink-900); }
.display-md { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-md); line-height: var(--lh-snug); color: var(--ink-900); }
.display-sm { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-sm); line-height: var(--lh-snug); color: var(--ink-900); }

.h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--ink-900); }
.h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--ink-900); }
.h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink-900); }
.h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--ink-900); }

.body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-900); }
.body-light { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-900); }
.body-muted { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-500); }
.small   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--ink-900); }
.caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--ink-500); }
.tiny    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-tiny); line-height: var(--lh-normal); color: var(--ink-500); }

/* Subheading treatment - an OUTLINE display look is part of the brand
   (title in Coluna Rounded + outlined subhead in Outfit). */
.subhead-outline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-900);
}

/* =========================================================
   COMPONENT PRIMITIVES (re-usable)
   --------------------------------------------------------- */
.evry-card {
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}
.evry-card-glass {
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
}
.evry-btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: var(--purple-600);
  border: 0;
  border-radius: 15px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.evry-btn:hover  { background: #8376FF; }
.evry-btn:active { transform: scale(0.98); }
.evry-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.evry-btn-gradient {
  background: var(--evry-gradient);
}
.evry-btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--hairline);
}
.evry-input {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  background: var(--surface-2);
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;
}
.evry-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-900);
}

body { color: var(--ink-900); font-family: var(--font-sans); }