/* =============================================================
   LORA AI — design tokens
   Drop this into any HTML artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================= */

/* Brand display + body face — Montserrat (TTFs supplied by user) */
@font-face { font-family: 'Montserrat'; font-weight: 100; font-style: normal; src: url('/assets/fonts/Montserrat-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 100; font-style: italic; src: url('/assets/fonts/Montserrat-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 200; font-style: normal; src: url('/assets/fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 200; font-style: italic; src: url('/assets/fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 300; font-style: normal; src: url('/assets/fonts/Montserrat-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 300; font-style: italic; src: url('/assets/fonts/Montserrat-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; src: url('/assets/fonts/Montserrat-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: italic; src: url('/assets/fonts/Montserrat-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; src: url('/assets/fonts/Montserrat-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: italic; src: url('/assets/fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; src: url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: italic; src: url('/assets/fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: italic; src: url('/assets/fonts/Montserrat-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; src: url('/assets/fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: italic; src: url('/assets/fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-style: normal; src: url('/assets/fonts/Montserrat-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-style: italic; src: url('/assets/fonts/Montserrat-BlackItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---------- COLOR — base palette ---------- */
  --bg-0:        #0A0814;   /* deep indigo-black, page bg */
  --bg-1:        #14102A;   /* slightly lifted bg, gradient stop top */
  --bg-2:        #1A1432;   /* card surface base */
  --bg-3:        #221A40;   /* hovered card */
  --bg-elev:     rgba(26, 20, 50, 0.55);  /* glass surface */

  --fg-1:        #FFFFFF;   /* headlines — pure white for max readability */
  --fg-2:        #F0EBFF;   /* body, lavender-white */
  --fg-3:        #C8BCEB;   /* secondary body */
  --fg-4:        #998AC8;   /* captions, muted */
  --fg-5:        #6E6395;   /* disabled */

  /* signature accent — the aurora */
  --accent-violet:   #7B5BFF;
  --accent-magenta:  #C56CFF;
  --accent-peach:    #FF8A6B;
  --accent-warm:     #FFB48A;
  --accent-solid:    #8B6CFF;   /* fallback when no gradient */

  /* dashed-border lavender — the signature stroke */
  --stroke-dashed:   rgba(155, 130, 255, 0.45);
  --stroke-solid:    rgba(155, 130, 255, 0.30);
  --stroke-strong:   rgba(230, 222, 255, 0.55);

  /* state */
  --success: #5EE6A8;
  --warning: #FFC861;
  --danger:  #FF6B8A;
  --info:    #6CC0FF;

  /* ---------- COLOR — gradients ---------- */
  --grad-aurora:        linear-gradient(135deg, #7B5BFF 0%, #C56CFF 45%, #FF8A6B 100%);
  --grad-aurora-soft:   linear-gradient(135deg, rgba(123, 91, 255, 0.18) 0%, rgba(197, 108, 255, 0.18) 45%, rgba(255, 138, 107, 0.18) 100%);
  --grad-page:          radial-gradient(ellipse 90% 60% at 50% 30%, #1A1240 0%, #0A0814 70%);
  --grad-portal:        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 138, 107, 0.55) 0%, rgba(197, 108, 255, 0.30) 40%, transparent 70%);

  /* ---------- TYPOGRAPHY — families ---------- */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* ---------- TYPOGRAPHY — type scale ---------- */
  --fs-display-xl: clamp(48px, 7vw, 96px);
  --fs-display:    clamp(36px, 5vw, 64px);
  --fs-h1:         clamp(32px, 4vw, 48px);
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-kicker:     12px;

  --lh-tight:      1.05;
  --lh-snug:       1.20;
  --lh-normal:     1.45;
  --lh-loose:      1.65;

  --tracking-display: -0.02em;
  --tracking-headline: -0.01em;
  --tracking-body: 0;
  --tracking-kicker: 0.18em;
  --tracking-wordmark: 0.32em;

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

  /* ---------- SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs:  6px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  20px;     /* icon containers */
  --r-xl:  24px;     /* cards */
  --r-2xl: 28px;     /* portrait portal */
  --r-pill: 999px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --glow-sm:    0 0 12px rgba(140, 100, 255, 0.35);
  --glow-md:    0 0 24px rgba(140, 100, 255, 0.45);
  --glow-lg:    0 0 48px rgba(140, 100, 255, 0.55);
  --glow-peach: 0 0 36px rgba(255, 138, 107, 0.40);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-pop:  0 24px 64px rgba(0, 0, 0, 0.65);
  --inner-rim:  inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* ---------- BORDERS ---------- */
  --border-dashed: 1px dashed var(--stroke-dashed);
  --border-solid:  1px solid var(--stroke-solid);
  --border-strong: 1px solid var(--stroke-strong);

  /* ---------- MOTION ---------- */
  --ease-calm:      cubic-bezier(.22,.61,.36,1);
  --ease-standard:  cubic-bezier(.4,0,.2,1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   520ms;
  --dur-drift:  4500ms;

  /* ---------- LAYERING ---------- */
  --z-bg:    0;
  --z-base:  1;
  --z-card:  10;
  --z-pop:   100;
  --z-modal: 1000;
}

/* =============================================================
   Page reset / canvas
   ============================================================= */
html, body {
  background: var(--bg-0);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(123, 91, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 138, 107, 0.06) 0%, transparent 60%);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* =============================================================
   Semantic typography
   ============================================================= */
.lora-display-xl,
.lora-display,
.lora-h1, .lora-h2, .lora-h3, .lora-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.lora-display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.lora-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.lora-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-headline); }
.lora-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.lora-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.lora-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

.lora-body    { font-family: var(--font-body); font-size: var(--fs-body);    line-height: var(--lh-normal); color: var(--fg-2); }
.lora-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.lora-caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-4); }

.lora-kicker {
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lora-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* gradient text — paint a single accent word */
.lora-grad-text {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* =============================================================
   Atomic UI — cards, buttons, dashed containers
   ============================================================= */
.lora-card {
  background: var(--bg-elev);
  border: var(--border-dashed);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: var(--sp-5);
  transition: box-shadow var(--dur-base) var(--ease-calm),
              border-color var(--dur-base) var(--ease-calm);
}
.lora-card:hover {
  box-shadow: var(--glow-md);
  border-color: rgba(155, 130, 255, 0.65);
}

.lora-icon-tile {
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  border: var(--border-dashed);
  background: rgba(26, 20, 50, 0.45);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
  transition: box-shadow var(--dur-base) var(--ease-calm),
              color var(--dur-base) var(--ease-calm);
}
.lora-icon-tile:hover {
  box-shadow: var(--glow-md);
  color: var(--fg-1);
}

.lora-btn {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  border: none;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur-base) var(--ease-calm),
              background var(--dur-base) var(--ease-calm);
}
.lora-btn-primary {
  background: var(--grad-aurora);
  color: #1A0F2E;
  box-shadow: var(--glow-sm);
}
.lora-btn-primary:hover { box-shadow: var(--glow-md); transform: scale(1.02); }
.lora-btn-primary:active { transform: scale(0.98); }

.lora-btn-ghost {
  background: transparent;
  color: var(--fg-2);
  border: var(--border-dashed);
}
.lora-btn-ghost:hover { color: var(--fg-1); border-color: rgba(155, 130, 255, 0.7); box-shadow: var(--glow-sm); }
.lora-btn-ghost:active { transform: scale(0.98); }

/* =============================================================
   Animations
   ============================================================= */
@keyframes lora-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes lora-pulse-glow {
  0%, 100% { box-shadow: var(--glow-sm); }
  50%      { box-shadow: var(--glow-md); }
}
@keyframes lora-aurora-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.lora-drift   { animation: lora-drift var(--dur-drift) var(--ease-calm) infinite; }
.lora-pulse   { animation: lora-pulse-glow var(--dur-drift) var(--ease-calm) infinite; }