/* =========================================================
   Sibi Alex — personal page
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: "Roboto"; src: url("../assets/fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../assets/fonts/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../assets/fonts/Roboto-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Brand palette ---------- */
:root {
  --rs-navy-900: #12162A;
  --rs-navy-850: #131620;
  --rs-navy-800: #191D35;
  --rs-navy-750: #151D34;
  --rs-navy-700: #1C3B56;
  --rs-navy-650: #1e2335;
  --rs-navy-600: #245073;
  --rs-steel-500: #406386;
  --rs-blue-500: #4691CD;
  --rs-blue-400: #5EA3D9;
  --rs-blue-300: #83ABD1;
  --rs-blue-100: #D3E3F1;
  --rs-blue-50:  #EEF4FA;
  --rs-cloud-200: #DFE2E8;
  --rs-cloud-300: #C7CBDA;
  --rs-green-500: #5DB56D;
  --rs-amber-500: #F3A337;
  --rs-red-500: #D64B4B;

  --rs-white: #FFFFFF;
  --rs-grey-100: #EDF0F4;
  --rs-grey-200: #DEE3EA;
  --rs-grey-300: #C4CCD8;
  --rs-grey-400: #9AA5B5;
  --rs-grey-500: #6E7A8C;
  --rs-grey-700: #333B49;
}

/* ---------- Semantic tokens: LIGHT (default) ---------- */
:root {
  --surface-page: var(--rs-blue-50);
  --surface-card: var(--rs-white);
  --surface-sunken: var(--rs-grey-100);

  --nav-surface: var(--rs-white);
  --widget-surface: var(--rs-white);
  --widget-stroke: var(--rs-cloud-200);
  --highlight: var(--rs-blue-500);
  --highlight-text: var(--rs-white);

  --text-heading: var(--rs-navy-750);
  --text-body: var(--rs-grey-700);
  --text-muted: var(--rs-grey-500);
  --text-link: var(--rs-blue-500);
  --text-link-hover: var(--rs-navy-700);

  --border-subtle: var(--rs-grey-200);
  --border-default: var(--rs-grey-300);
}

/* ---------- Semantic tokens: DARK ---------- */
[data-theme="dark"] {
  --surface-page: var(--rs-navy-850);
  --surface-card: var(--rs-navy-650);
  --surface-sunken: var(--rs-navy-900);

  --nav-surface: var(--rs-navy-850);
  --widget-surface: var(--rs-navy-650);
  --widget-stroke: var(--rs-steel-500);

  --text-heading: var(--rs-white);
  --text-body: #C9D2E0;
  --text-muted: #8F9BB2;
  --text-link: var(--rs-blue-400);
  --text-link-hover: var(--rs-blue-300);

  --border-subtle: rgba(64, 99, 134, .55);
  --border-default: var(--rs-steel-500);
}

/* ---------- Type, sizing, motion ---------- */
:root {
  --font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --text-sm: 13px;
  --text-base: 15px;

  --control-h-md: 36px;
  --control-h-lg: 44px;
  --radius-control: 6px;
  --focus-ring: 0 0 0 3px rgba(70, 144, 203, .35);

  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --transition-control:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  transition: background 240ms var(--ease-standard), color 240ms var(--ease-standard);
}

h1, h2 { margin: 0; color: var(--text-heading); font-weight: 700; }
p { margin: 0; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--rs-blue-100); color: var(--rs-navy-800); }

.container { max-width: 1120px; margin: 0 auto; padding-left: 30px; padding-right: 30px; }

/* Icons (SVG injected by script.js) */
.icon { display: inline-flex; flex: 0 0 auto; }
.icon svg { display: block; }
.icon-accent { color: var(--highlight); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-surface);
  border-bottom: 1px solid var(--widget-stroke);
}

.header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--text-heading); }
.brand:hover { color: var(--text-heading); }

.nav { display: flex; align-items: center; gap: 4px; }

.nav-link {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-heading);
  background: transparent;
  transition: background 160ms var(--ease-standard);
}
.nav-link:hover { color: var(--text-heading); }
.nav-link.is-active { color: var(--highlight-text); background: var(--highlight); }

.theme-toggle {
  margin-left: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid var(--widget-stroke);
  background: var(--widget-surface);
  color: var(--text-heading);
  cursor: pointer;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-control), transform var(--dur-instant) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }

.btn-md { height: var(--control-h-md); padding: 0 14px; font-size: var(--text-sm); gap: 8px; }
.btn-lg { height: var(--control-h-lg); padding: 0 20px; font-size: var(--text-base); gap: 10px; }

.btn-secondary { background: var(--rs-blue-500); color: #fff; }
.btn-secondary:hover { background: var(--rs-navy-600); }

.btn-outline { background: transparent; color: var(--text-heading); border-color: var(--border-default); }
.btn-outline:hover { background: var(--surface-sunken); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding-top: 72px;
  padding-bottom: 88px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px;
  align-items: center;
}

.hero-text { display: flex; flex-direction: column; gap: 24px; }

.eyebrow {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .12em;
  /*text-transform: uppercase;*/
  color: var(--highlight);
}

.hero-title {
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero-lead { max-width: 520px; font-size: 19px; line-height: 1.55; text-wrap: pretty; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

.photo-wrap { 
  justify-self: center; 
  width: 100%; 
  max-width: 440px; 
  perspective: 1000px; }

.photo {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--widget-stroke);
  background: var(--widget-surface);
  box-shadow: 0 24px 48px -24px rgba(25, 29, 53, .35);
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 240ms var(--ease-standard);
}
.photo img { display: block; 
  width: 100%; 
  aspect-ratio: 3 / 4; object-fit: cover; }

/* =========================================================
   Sections
   ========================================================= */
.section { border-top: 1px solid var(--widget-stroke); }

.section-grid {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 40px;
}
.section-contact .section-grid { padding-bottom: 96px; }

.section-title { font-size: 32px; letter-spacing: -.02em; }

.section-body { grid-column: span 2; max-width: 680px; display: flex; flex-direction: column; }

/* On narrow screens the grid collapses to one column */
@media (max-width: 647px) {
  .section-body { grid-column: auto; }
}

.about-body { gap: 16px; font-size: 17px; line-height: 1.65; text-wrap: pretty; }

/* Contact */
.contact-list { gap: 12px; }

.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  background: var(--widget-surface);
  border: 1px solid var(--widget-stroke);
  border-radius: 20px;
  color: var(--text-heading);
  font-size: 17px;
}

.contact-main { display: flex; align-items: center; gap: 14px; min-width: 0; }

.contact-email { font-size: 17px; color: var(--text-heading); overflow-wrap: anywhere; }

.contact-link { flex-wrap: nowrap; }
.contact-link:hover { color: var(--text-heading); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { 
  border-top: 1px solid var(--widget-stroke); 
  text-align: center;
}
.footer-inner { 
  padding-top: 24px; 
  padding-bottom: 24px; 
  font-size: 13px; color: 
  var(--text-muted); 
}