/* ============================================================
   SIMIEN PROPERTIES — Design System
   colors_and_type.css
   
   Google Font substitutions for Calibri / Calibri Light:
   - Headings/Display: Cormorant Garamond (elegant serif)
   - UI/Body: DM Sans (humanist sans-serif)
   
   ⚠ FLAG: Original brand fonts are Calibri Light (headings) 
   and Calibri (body). Please provide .ttf/.woff2 files if 
   exact fidelity is required.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Navy scale */
  --color-navy-950:  #0D1B3A;   /* Deepest background */
  --color-navy-900:  #1C2D5A;   /* Primary navy */
  --color-navy-800:  #1E3564;   /* Rich navy */
  --color-navy-700:  #2A4578;   /* Navy mid-dark */
  --color-navy-600:  #2A4A7A;   /* Card bg on dark */
  --color-navy-500:  #2E4E80;   /* Interactive navy */
  --color-navy-400:  #5A6880;   /* Secondary text on dark */

  /* Blue-gray scale */
  --color-bluegray-300: #7A9AB8;  /* Muted icons */
  --color-bluegray-200: #A8B8CC;  /* Dividers, placeholders */
  --color-bluegray-100: #C8D0DC;  /* Light borders */
  --color-bluegray-50:  #D8DCE8;  /* Subtle backgrounds */

  /* Orange / Accent */
  --color-orange-600:   #C97200;  /* Hover / pressed */
  --color-orange-500:   #F28C00;  /* Primary accent */
  --color-orange-400:   #FFAA33;  /* Light accent */

  /* Neutrals */
  --color-white:        #FFFFFF;
  --color-offwhite:     #F7F5F2;  /* Page bg on light mode */
  --color-gray-200:     #E8E8E8;
  --color-gray-100:     #E0E0E0;
  --color-black:        #000000;

  /* Semantic */
  --color-success:      #0D6B50;  /* Checkmarks, completed */

  /* ============================================================
     SEMANTIC COLOR ROLES
     ============================================================ */
  /* Backgrounds */
  --bg-primary:         var(--color-navy-900);
  --bg-deep:            var(--color-navy-950);
  --bg-card-dark:       var(--color-navy-600);
  --bg-page-light:      var(--color-offwhite);
  --bg-card-light:      var(--color-white);

  /* Text on dark backgrounds */
  --text-on-dark-primary:   var(--color-white);
  --text-on-dark-secondary: var(--color-bluegray-200);
  --text-on-dark-muted:     var(--color-bluegray-300);

  /* Text on light backgrounds */
  --text-on-light-primary:   var(--color-navy-900);
  --text-on-light-secondary: var(--color-navy-400);
  --text-on-light-muted:     var(--color-bluegray-200);

  /* Accent */
  --accent-primary:         var(--color-orange-500);
  --accent-hover:           var(--color-orange-600);

  /* Borders */
  --border-dark:   rgba(255, 255, 255, 0.12);
  --border-light:  var(--color-bluegray-100);
  --border-subtle: var(--color-gray-200);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  /* Font families */
  --font-display:   'Staatliches', Georgia, serif;
  --font-ui:        'Roboto', 'Calibri', system-ui, sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', monospace;

  /* Font weights */
  --fw-light:    300; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */

  /* Type scale (px-based) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  80px;

  /* Line heights */
  --lh-tight:    1.1;  /* @kind other */
  --lh-snug:     1.25; /* @kind other */
  --lh-normal:   1.5;  /* @kind other */
  --lh-relaxed:  1.7;  /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0; /* @kind other */
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.2em;

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

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-none: 0;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-lg:  0 4px 20px rgba(0, 0, 0, 0.22);
  --shadow-xl:  0 8px 40px rgba(0, 0, 0, 0.28);
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   SEMANTIC TYPE STYLES — Element defaults
   ============================================================ */

/* Display: large hero headlines */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Section header label (all caps, spaced — above headlines) */
.t-label {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent-primary);
}

/* H1 — page headline */
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* H2 — section title */
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
}

/* H3 — subsection */
.t-h3 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}

/* H4 — card title */
.t-h4 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
}

/* Body large */
.t-body-lg {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
}

/* Body default */
.t-body {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

/* Caption / small */
.t-caption {
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-on-light-secondary);
}

/* Stat / metric number */
.t-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

/* Quote / blockquote */
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
}

/* Button text */
.t-btn {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  letter-spacing: var(--ls-wide);
}


* { box-sizing: border-box; }
    body { margin: 0; background: var(--color-offwhite); font-family: var(--font-ui); }
    a { color: var(--color-orange-500); }
    a:hover { color: var(--color-orange-600); }
    @keyframes scrollCueBounce { 0%, 100% { transform: translate(-50%, 0); opacity: 0.55; } 50% { transform: translate(-50%, 10px); opacity: 1; } }