/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  /* --- Colors --- */
  --color-brand-blue:        #0047C2;
  --color-brand-blue-rgb:    0, 71, 194;

  --color-brand-blue-sec:    #1D6AE5;
  --color-brand-blue-sec-rgb: 29, 106, 229;

  --color-amber:             #E0A42E;
  --color-amber-rgb:         253, 186, 69;

  --color-bg:                #070809;
  --color-surface:           #0A0B0C;
  --color-surface-raised:    #111315;

  --color-brand-purple:      #7700CC;
  --color-brand-purple-rgb:  119, 0, 204;

  /* --- Text (dark mode) --- */
  --text-primary:   rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-muted:     rgba(255, 255, 255, 0.40);
  --text-disabled:  rgba(255, 255, 255, 0.22);

  /* --- Borders --- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);

  /* --- Typography scale --- */
  --text-display-xl:  4.5rem;   /* 72px */
  --text-display-l:   3.5rem;   /* 56px */
  --text-display-m:   2.5rem;   /* 40px */
  --text-mktg-1:      2rem;     /* 32px */
  --text-mktg-2:      1.5rem;   /* 24px */
  --text-mktg-3:      1.25rem;  /* 20px */
  --text-mktg-body:   1.125rem; /* 18px */
  --text-body:        0.9375rem;/* 15px */
  --text-caption:     0.8125rem;/* 13px */

  /* --- Font families --- */
  --font-sans:  'Inter', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}

/* Base font size bump */
html { font-size: 16px; }
body { font-size: 15px; background-color: var(--color-bg); }

/* Ambient glow animations */
@keyframes drift-blue {
  0%   { transform: translate(-40%, -40%) scale(1); }
  33%  { transform: translate(-30%, -50%) scale(1.1); }
  66%  { transform: translate(-50%, -35%) scale(0.95); }
  100% { transform: translate(-40%, -40%) scale(1); }
}
@keyframes drift-purple {
  0%   { transform: translate(40%, 40%) scale(1); }
  33%  { transform: translate(50%, 30%) scale(0.95); }
  66%  { transform: translate(35%, 50%) scale(1.1); }
  100% { transform: translate(40%, 40%) scale(1); }
}
.glow-blue   { animation: drift-blue   12s ease-in-out infinite; }
.glow-purple { animation: drift-purple 14s ease-in-out infinite; }

/* ============================================================
   Semantic field / button helpers
   ============================================================ */
.field-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  transition: border-color 0.2s;
}
.field-input:focus { outline: none; border-color: rgba(var(--color-brand-blue-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--color-brand-blue-rgb), 0.18); }
.field-input::placeholder { color: var(--text-disabled); }
@media (max-width: 640px) { .field-input { font-size: 1rem; } }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-blue);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  padding: 0.625rem 1.5rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-primary:hover { background-color: var(--color-brand-blue-sec); }

/* Scale up utility text sizes */
.text-xs  { font-size: 0.8125rem !important; }  /* 13px → was 12px */
.text-sm  { font-size: 0.9375rem !important; }  /* 15px → was 14px */
.text-base { font-size: 1.0625rem !important; } /* 17px → was 16px */
.text-lg  { font-size: 1.1875rem !important; }  /* 19px → was 18px */
.text-2xl { font-size: 1.625rem !important; }   /* 26px → was 24px */
.text-3xl { font-size: 2rem !important; }       /* 32px → was 30px */
.text-5xl { font-size: 3.25rem !important; }    /* 52px → was 48px */

/* Markdown / prose for .markdown-body: Tailwind @apply in app/assets/tailwind/application.css */