/* ===== CSS Custom Properties ===== */
:root {
  --cocoa-dark: #3B1F0B;
  --cocoa-brown: #5C3317;
  --cocoa-medium: #8B5E3C;
  --candy-pink: #E8A0BF;
  --candy-rose: #D4637A;
  --cream: #FFF8F0;
  --cream-dark: #F5EDE3;
  --gold: #C9A84C;
  --gold-light: #E8D5A3;
  --success-green: #5A8F5A;
  --white: #FFFFFF;
  --text-primary: #2D1810;
  --text-secondary: #6B5244;
  --shadow-soft: 0 2px 12px rgba(59, 31, 11, 0.08);
  --shadow-card: 0 4px 20px rgba(59, 31, 11, 0.10);
  --shadow-hover: 0 8px 30px rgba(59, 31, 11, 0.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@import url('https://fonts.googleapis.com/css?family=Fjalla+One&display=swap&subset=latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;600;700&family=Oswald:wght@200;300;400;500;600;700&display=swap');

/* ===== Global ===== */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }

body {
  background-color: var(--cream);
  color: var(--text-primary);
  font-family: 'Josefin Sans', sans-serif;
}

/* ===== Color utilities ===== */
.bg-info { background-color: var(--cocoa-brown) !important; }
.bg-theme { background-color: var(--cocoa-medium) !important; }
.bgfblue { background-color: var(--cocoa-brown); }
.text-info { color: var(--cocoa-brown) !important; }

.fblack { color: #000000; }
.fblack1 { color: #2e2c2c; }
.fwhite { color: var(--cream); }
.fred { color: var(--candy-rose); }
.fgreen { color: var(--success-green); }
.fblue { color: var(--cocoa-brown); }
.fbrown { color: var(--cocoa-medium); }
.fiyellow { color: var(--gold); }
.fgrey { color: var(--text-secondary); }

/* ===== Font sizes ===== */
.ftn1{font-size: 8px;} .ftn2{font-size: 9px;} .ftn3{font-size: 10px;}
.ftn4{font-size: 11px;} .ftn5{font-size: 12px;} .ftn6{font-size: 13px;}
.ftn7{font-size: 14px;} .ftn8{font-size: 15px;} .ftn9{font-size: 16px;}
.ftn10{font-size: 17px;} .ftn11{font-size: 18px;} .ftn12{font-size: 19px;}
.ftn13{font-size: 20px;} .ftn14{font-size: 21px;} .ftn15{font-size: 22px;}
.ftn16{font-size: 23px;} .ftn17{font-size: 24px;} .ftn18{font-size: 25px;}
.ftn19{font-size: 26px;} .ftn20{font-size: 27px;} .ftn21{font-size: 28px;}
.ftn22{font-size: 29px;} .ftn23{font-size: 30px;} .ftn24{font-size: 31px;}
.ftn25{font-size: 32px;} .ftn26{font-size: 33px;} .ftn27{font-size: 34px;}
.ftn28{font-size: 35px;} .ftn29{font-size: 36px;} .ftn30{font-size: 37px;}
.ftn31{font-size: 38px;} .ftn32{font-size: 39px;} .ftn33{font-size: 40px;}
.ftn34{font-size: 41px;} .ftn35{font-size: 42px;} .ftn36{font-size: 43px;}
.ftn37{font-size: 44px;} .ftn38{font-size: 45px;} .ftn39{font-size: 47px;}
.ftn40{font-size: 45px;} .ftn41{font-size: 50px;}

.ftnh1{line-height: 1px;} .ftnh2{line-height: 20px;}
.ftnh3{line-height: 20px;} .ftnh4{line-height: 20px;}
.ftnh5{line-height: 35px;} .ftnh6{line-height: 50px;}

/* ===== Font families ===== */
.ftn { text-decoration: none; font-family: 'Josefin Sans', sans-serif; }
.ftn a:link, .ftn a:hover, .ftn a:visited { text-decoration: none; font-family: 'Josefin Sans', sans-serif; }

.ftno { text-decoration: none; font-family: 'Oswald', sans-serif; }
.ftno a:link, .ftno a:hover, .ftno a:visited { text-decoration: none; font-family: 'Oswald', sans-serif; }

.ftnicon { text-decoration: none; }

/* ===== Links ===== */
a:link { color: var(--cocoa-brown); }
a:visited { color: var(--cocoa-dark); }
a:hover { color: var(--candy-rose); }

/* ===== Buttons ===== */
.btn-blue {
  background-color: var(--candy-rose) !important;
  border: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.btn-blue:hover {
  background-color: var(--cocoa-brown) !important;
  transform: translateY(-1px);
}