/* =========================================================
   Friendship Circle & LifeTown — Design Tokens
   Two sub-brands, one system. Each has its own tokens.
   ========================================================= */

/* ---------- FONTS ---------- */

@font-face {
  font-family: 'Friendship Circle';
  src: url('assets/fonts/FriendshipCircle-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Friendship Circle';
  src: url('assets/fonts/FriendshipCircle-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('assets/fonts/ProximaNova-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('assets/fonts/ProximaNova-LightIt.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('assets/fonts/ProximaNova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('assets/fonts/ProximaNova-RegularIt.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('assets/fonts/ProximaNova-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('assets/fonts/ProximaNova-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   ROOT TOKENS — shared + default to Friendship Circle
   ========================================================= */
:root {
  /* ----- FONT FAMILIES ----- */
  --font-display: 'Friendship Circle', 'Proxima Nova', system-ui, sans-serif;
  --font-body:    'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
  --font-fallback-web: 'Proxima Nova', Arial, sans-serif; /* when custom font can't embed (emails) */

  /* ----- TYPE SCALE (web px) ----- */
  --fs-display: 64px;   /* hero headlines */
  --fs-h1: 48px;        /* page title */
  --fs-h2: 32px;        /* section headline — matches "32pt" in print guide */
  --fs-h3: 24px;
  --fs-h4: 20px;        /* "secondary titles 20pt" */
  --fs-lead: 20px;
  --fs-body: 16px;      /* 10pt print ≈ 16px screen */
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-overline: 13px;  /* "subheadings 9pt all caps" scaled up for screens */

  /* ----- LINE HEIGHTS ----- */
  --lh-tight: 1.1;
  --lh-display: 1.15;
  --lh-heading: 1.2;
  --lh-body: 1.55;       /* 13/10 ~= 1.3 in print; looser on screen */
  --lh-caption: 1.4;

  /* ----- LETTER SPACING ----- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-overline: 0.12em;  /* ALL-CAPS subheads */

  /* ----- WEIGHTS (aliased to clear roles) ----- */
  --weight-display: 600;    /* Friendship Circle SemiBold on hero type */
  --weight-display-light: 300; /* Friendship Circle Light for wordmark-style */
  --weight-body: 400;
  --weight-body-bold: 700;
  --weight-body-black: 900;

  /* ----- SPACING (4-px scale) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----- RADII ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ----- BORDERS ----- */
  --border-1: 1px;
  --border-2: 2px;
  --border-thick: 3px;

  /* ----- SHADOWS (soft, friendly, never dramatic) ----- */
  --shadow-xs: 0 1px 2px rgba(31, 53, 94, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 53, 94, 0.08);
  --shadow-md: 0 6px 18px rgba(31, 53, 94, 0.10);
  --shadow-lg: 0 14px 38px rgba(31, 53, 94, 0.14);
  --shadow-ring: 0 0 0 3px rgba(31, 53, 94, 0.18);

  /* ----- MOTION ----- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;

  /* ----- LAYOUT ----- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;

  /* ----- COLOR: NEUTRALS (shared) ----- */
  --ink-900: #0F1B33;    /* body ink — slightly warmer than pure black */
  --ink-700: #324057;
  --ink-500: #5E6B80;
  --ink-300: #A9B1BE;
  --ink-200: #CED3DB;
  --ink-100: #E4E7EC;
  --ink-50:  #F2F4F7;
  --paper:   #FFFFFF;
  --canvas:  #FAFBFC;    /* app background */

  /* ----- COLOR: SEMANTIC (shared) ----- */
  --color-success: #3F9D6A;
  --color-warn:    #E7A100;
  --color-error:   #D24A3A;   /* pulled toward FC "warm red" */
  --color-info:    #2E6FB7;
}

/* =========================================================
   SUB-BRAND TOKENS
   ========================================================= */

/* ---------- FRIENDSHIP CIRCLE ---------- */
/* Per FC_Livingston_BrandGuidelines page 6 */
:root,
.theme-fc {
  /* Primary */
  --fc-blue:        #1F355E;   /* PMS 534 — dark blue */
  --fc-blue-15:     #E1E5ED;   /* 15% tint */
  --fc-blue-30:     #C4CBD6;   /* 30% tint */
  --fc-teal:        #67BAAF;   /* PMS 563 — teal */
  --fc-teal-20:     #D9ECE9;
  --fc-teal-40:     #B7DDD7;

  /* Complementary */
  --fc-yellow:      #FFB819;   /* PMS 1235 */
  --fc-yellow-40:   #FFE3A8;
  --fc-lime:        #B6BD00;   /* PMS 390 */
  --fc-lime-40:     #E4E6AC;
  --fc-red:         #FF4338;   /* PMS Warm Red */
  --fc-red-40:      #FFC6AB;
  --fc-purple:      #95358C;   /* PMS 513 */
  --fc-purple-40:   #D8B5D1;

  /* Brand-bound aliases */
  --brand-primary:  var(--fc-blue);
  --brand-primary-ink: #FFFFFF;
  --brand-secondary: var(--fc-teal);
  --brand-accent:   var(--fc-yellow);
  --brand-bg-soft:  var(--fc-blue-15);
}

/* ---------- LIFETOWN ---------- */
/* Sampled from official LifeTown logo PNG */
.theme-lifetown {
  /* Primary */
  --lt-navy:        #203860;   /* matches logo navy */
  --lt-navy-15:     #E2E4EB;
  --lt-navy-30:     #C4C8D5;
  --lt-gold:        #F8A818;   /* matches logo gold */
  --lt-gold-20:     #FDE4B9;
  --lt-gold-40:     #FCD38B;

  /* Extended — derived for UI states (same family, earthy + warm) */
  --lt-gold-deep:   #D98A00;
  --lt-sky:         #9BC4E2;   /* for illustrative accents */
  --lt-green:       #7BAE50;   /* "street green" for LifeTown-center metaphor */
  --lt-brick:       #CB5C3A;   /* warm brick accent */
  --lt-cream:       #FFF7E8;   /* soft warm page tint */

  /* Brand-bound aliases */
  --brand-primary:  var(--lt-navy);
  --brand-primary-ink: #FFFFFF;
  --brand-secondary: var(--lt-gold);
  --brand-accent:   var(--lt-gold-deep);
  --brand-bg-soft:  var(--lt-cream);
}


/* ---------- SOUL CENTER ---------- */
/* Sampled from official Soul Center logo JPG.
   Typography matches Friendship Circle: FC display + Proxima Nova body. */
.theme-soul {
  /* Primary — blue on blue */
  --sc-indigo:      #304070;   /* deep violet-navy wordmark */
  --sc-indigo-15:   #E1E4EE;   /* 15% tint */
  --sc-indigo-30:   #C4C9DC;   /* 30% tint */
  --sc-blue:        #5090C0;   /* cornflower "Center" + outer arcs */
  --sc-blue-20:     #D6E4EF;
  --sc-blue-40:     #A8C7DE;
  --sc-mist:        #F4F7FB;   /* page wash */

  /* Brand-bound aliases */
  --brand-primary:  var(--sc-indigo);
  --brand-primary-ink: #FFFFFF;
  --brand-secondary: var(--sc-blue);
  --brand-accent:   var(--sc-blue);
  --brand-bg-soft:  var(--sc-mist);
}


/* =========================================================
   SEMANTIC STYLE UTILITIES
   ========================================================= */

/* Base body reset */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary, var(--fc-blue));
  text-wrap: pretty;
}
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary, var(--fc-blue));
  text-wrap: pretty;
  margin: 0 0 var(--space-5);
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--brand-primary, var(--fc-blue));
  margin: 0 0 var(--space-4);
}
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
}
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
}

/* Subheads — matches print "9pt all caps" style */
.overline {
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: var(--fs-overline);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--brand-primary, var(--fc-blue));
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

p { margin: 0 0 var(--space-4); color: var(--ink-900); }
small, .small { font-size: var(--fs-small); color: var(--ink-500); }
.caption { font-size: var(--fs-caption); color: var(--ink-500); line-height: var(--lh-caption); }

a {
  color: var(--brand-primary, var(--fc-blue));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--brand-secondary, var(--fc-teal)); }