/* =============================================================
   SEMOG — Colors & Type
   "Preocupe-se apenas em morar"
   ============================================================= */

/* Fonts
   - Saira: loaded from Google Fonts (no licensed file delivered yet)
   - Inter: licensed file shipped in /fonts (variable font, 100–900)
   NOTE: @import MUST come before @font-face per CSS spec — otherwise
   PostCSS/Vite emit "@import must precede all other statements". */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Tiers declared in order: 2 (brand aliases) → 1 (primitives) → 3 (semantic).
   CSS resolves vars at compute time, so declaration order doesn't affect cascade.
   This file preserves historical ordering; tier hierarchy is documented per
   section below and in the README ("Token tiers" section). */

:root {
  /* ============================================================
   * TIER 2 — Brand aliases canônicos
   * Cores nomeadas do Manual de Marca + extensões brand semânticas.
   * Use quando o papel é especificamente brand (página de marca,
   * gradient hero, surface institucional). Fonte de verdade
   * EXTERNA (Pantone) — paralela ao Tier 1, não derivada dele.
   * ============================================================ */

  /* ---- Brand colors (from the Manual de Marca) -------------- */
  --semog-blue-world: #1B2D70;        /* Pantone 103-8 C | CIOO M88 Y28 K13 */
  --semog-gray-mist:  #BCBCC7;        /* Pantone 174-1 C | C30 M23 Y16 K1   */
  --semog-sky:        #ADD5EB;        /* Pantone P 116-2 C | C36 M6 Y5 K0   */

  /* ---- Extended brand semantics (UI surfaces) ---------------
     These are not from the manual but are the canonical brand
     hex used in the auth/marketing surfaces (Login, BrandPanel).
     Visually close to --blue-900 / --blue-500 below; kept as
     separate tokens to preserve semantic intent. If consolidated
     in a future release, these aliases stay and re-point to the
     scale. */
  --semog-brand-page: #0B1638;        /* full-screen brand background (Login, PendingActivation) */
  --semog-brand-mid:  #2A47A8;        /* azul intermediário decorativo (gradient brand, accent shapes) */

  /* ============================================================
   * TIER 1 — Primitives (paleta crua)
   * Escalas numéricas. NÃO consumir direto em JSX/componentes.
   * Consumidos indiretamente via Tier 3 (--link: var(--blue-600)).
   * ============================================================ */

  /* Blue World scale (extrapolated for UI surfaces) */
  --blue-50:  #EEF1FA;
  --blue-100: #D6DEF1;
  --blue-200: #ACBCE0;
  --blue-300: #7E96CC;
  --blue-400: #4F6FB5;
  --blue-500: #2F4FA0;
  --blue-600: #1B2D70;   /* core */
  --blue-700: #16265D;
  --blue-800: #101D49;
  --blue-900: #0A1330;

  /* Sky scale (Pantone P 116-2 C) */
  --sky-50:  #F4FAFD;
  --sky-100: #E2F1F9;
  --sky-200: #C9E4F3;
  --sky-300: #ADD5EB;    /* core */
  --sky-400: #7EBADC;
  --sky-500: #4F9DCB;

  /* Gray mist scale */
  --gray-50:  #F6F6F8;
  --gray-100: #ECECEF;
  --gray-200: #D9D9DF;
  --gray-300: #BCBCC7;   /* core */
  --gray-400: #8C8C99;
  --gray-500: #6C6C78;
  --gray-600: #4B4B55;
  --gray-700: #2E2E36;
  --gray-800: #1A1A20;

  /* ============================================================
   * TIER 3 — Semantic surfaces (por papel funcional)
   * Tokens por função, não por cor. Preferência padrão pra
   * componentes de aplicação. Resolvem para Tier 1 (cor concreta)
   * mas o componente não precisa saber qual.
   * ============================================================ */

  /* ---- Semantic surface tokens ----------------------------- */
  --bg:          #FFFFFF;
  --bg-soft:     var(--gray-50);
  --bg-inverse:  var(--blue-600);

  --fg:          var(--blue-600);   /* primary text on light */
  --fg-muted:    var(--gray-500);
  --fg-subtle:   var(--gray-400);
  --fg-inverse:  #FFFFFF;

  --border:      var(--gray-200);
  --border-strong: var(--gray-300);

  /* Hairlines: 0.5px row/section separators used inside cards. Two
     alphas because section dividers (table th, detail-header bottom)
     need slightly more weight than row separators (tbody td, feed-row,
     upcoming-row). Consumed via `0.5px solid var(--hairline-*)`. */
  --hairline-row:     rgba(10,19,48,0.06);
  --hairline-section: rgba(10,19,48,0.08);

  /* --link is the interactive emphasis token (links, secondary CTAs, accent
     surfaces). Named --link (not --accent) since 0.4.0 to avoid cascade
     collision with shadcn/ui, which uses --accent for subtle hover/active
     backgrounds (typically a light gray). */
  --link:         var(--blue-600);
  --link-soft:    var(--sky-200);

  /* ---- Feedback (saturated text + soft bg + border trio) ----
     Pattern: var(--X) for saturated text, var(--X-soft) for backgrounds,
     var(--X-border) for outlines. Calibrated to coexist with both
     Tailwind green/emerald and amber/yellow palettes during migration —
     drift documented in CHANGELOG 0.3.0. */
  --success:        #2F8C5E;
  --success-soft:   #E8F3ED;
  --success-border: #B8DCC8;

  --warning:        #C8881A;
  --warning-soft:   #FAF1DD;
  --warning-border: #EBD9A8;

  --danger:         #B33A3A;
  --danger-soft:    #F9E3E3;
  --danger-border:  #E8B8B8;

  /* --info trio aligned with Tailwind blue scale (zero drift on
     bg-blue-50 → bg-info-soft migration). New in 0.3.0 to disambiguate
     informational accents from --link (which is brand blue). */
  --info:           #2563EB;   /* = Tailwind blue-600 */
  --info-soft:      #EFF6FF;   /* = Tailwind blue-50  */
  --info-border:    #BFDBFE;   /* = Tailwind blue-200 */

  /* ---- Signature gradients (used everywhere) ---------------- */
  --grad-cover:
    radial-gradient(120% 90% at 85% 8%,  #ffffff 0%, rgba(255,255,255,0) 50%),
    radial-gradient(80% 60% at 15% 95%,  #ffffff 0%, rgba(255,255,255,0) 55%),
    linear-gradient(120deg, #1B2D70 0%, #4F6FB5 35%, #ADD5EB 65%, #FFFFFF 100%);

  --grad-soft:
    radial-gradient(70% 60% at 30% 30%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #ADD5EB 0%, #BCBCC7 100%);

  --grad-deep:
    radial-gradient(80% 60% at 80% 20%, #4F6FB5 0%, rgba(79,111,181,0) 60%),
    linear-gradient(160deg, #0A1330 0%, #1B2D70 60%, #2F4FA0 100%);

  --grad-mist:
    linear-gradient(135deg, #FFFFFF 0%, #BCBCC7 100%);

  /* III-block specular gradient (chrome look of the monogram blocks) */
  --grad-pillar:
    linear-gradient(180deg, #0A1330 0%, #1B2D70 22%, #FFFFFF 55%, #4F6FB5 78%, #0A1330 100%);

  /* ---- Typography ------------------------------------------- */
  --font-display: 'Saira', 'Saira Semi Condensed', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (Major Third – 1.250) */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  20px;
  --fs-xl:  25px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 52px;
  --fs-5xl: 68px;
  --fs-6xl: 88px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.08em;

  /* ---- Spacing / radii / shadow / motion -------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Luma / liquid-glass direction: softer, more generous corners. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Glass surface tokens (Luma theme) ------------------- */
  /* Use these on top of a Semog gradient or photo background. */
  --glass-tint-light:    rgba(255, 255, 255, 0.62);
  --glass-tint-light-2:  rgba(255, 255, 255, 0.38);
  --glass-tint-blue:     rgba(27, 45, 112, 0.32);
  --glass-tint-dark:     rgba(10, 19, 48, 0.42);
  --glass-stroke-light:  rgba(255, 255, 255, 0.55);
  --glass-stroke-dark:   rgba(10, 19, 48, 0.12);
  --glass-blur:          18px;
  --glass-blur-strong:   28px;
  /* Inner specular hairline that gives the "liquid" feel */
  --glass-inset-light:   inset 0 1px 0 rgba(255,255,255,0.65),
                         inset 0 -1px 0 rgba(255,255,255,0.18);
  --glass-inset-dark:    inset 0 1px 0 rgba(255,255,255,0.18),
                         inset 0 -1px 0 rgba(10,19,48,0.25);

  --shadow-1: 0 1px 2px rgba(10,19,48,0.05), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-2: 0 6px 16px rgba(10,19,48,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-3: 0 14px 36px rgba(10,19,48,0.14), 0 1px 0 rgba(255,255,255,0.6) inset;
  --shadow-4: 0 28px 64px rgba(10,19,48,0.22), 0 1px 0 rgba(255,255,255,0.6) inset;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
}

/* No element selectors here. This file ships ONLY @font-face, the Saira
   Google Fonts @import, and :root design tokens — safe to import in any
   app without touching the host's existing styles.

   For element defaults (h1..h6, p, a, body...), import the opt-in:
     @import "@semog-tech/tahoe/base"; */