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

/* Fonts
   - Inter: licensed file shipped in /fonts (variable font, 100–900)
   - Saira: still loaded from Google Fonts (no licensed file delivered yet) */
@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;
}
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- 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   */

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

  /* ---- 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);

  --accent:      var(--blue-600);
  --accent-soft: var(--sky-200);

  --success: #2F8C5E;
  --warning: #C8881A;
  --danger:  #B33A3A;

  /* ---- 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;
}

/* ============================================================
   Element defaults — drop-in semantic styles
   ============================================================ */
html, body { font-family: var(--font-body); color: var(--fg); background: var(--bg); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; color: var(--fg); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); margin: 0; }
h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 400; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 600; color: var(--fg-muted); }

p { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--fg); margin: 0 0 1em 0; }
small, .caption { font-size: var(--fs-xs); color: var(--fg-muted); letter-spacing: var(--tracking-wide); }
.eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); }
.display { font-family: var(--font-display); font-size: var(--fs-6xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 300; }
.lead { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: 400; }

a { color: var(--accent); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
a:hover { opacity: 0.7; }
a:active { opacity: 0.5; }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }