/*
 * ============================================================
 * DESTINY AJAKAIYE — BRAND DESIGN SYSTEM
 * Source: Figma / Destiny Portfolio Redesign
 * Generated: 2026-04-07
 *
 * HOW TO USE:
 * Reference any token via var(--token-name) in your templates.
 * Never hardcode colours, fonts, or spacing in page templates.
 * Update this file when the Figma design system changes.
 * ============================================================
 */

/* ============================================================
   GOOGLE FONTS
   Syne (headings) · Manrope (body) · Cormorant Garamond (accent)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Manrope:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     COLOURS — Brand
     ---------------------------------------------------------- */
  --color-primary:        #051008;   /* Deep forest black-green */
  --color-mint:           #50C878;   /* Mint green — main accent */
  --color-background:     #010302;   /* Near-black site background */

  /* Accent palette */
  --color-orange:         #F5A623;   /* Light orange / warm energy */
  --color-peach:          #F9C5A0;   /* Peach / soft warmth */
  --color-gold:           #F5CC2A;   /* Warm gold / highlight */

  /* On-accent (text on coloured backgrounds) */
  --color-on-accent:      #FFFFFF;

  /* ----------------------------------------------------------
     COLOURS — Semantic
     ---------------------------------------------------------- */
  --color-error:          #EF2E2E;
  --color-warning:        #F4A029;
  --color-success:        #2ECC71;
  --color-info:           #028CCA;

  /* ----------------------------------------------------------
     COLOURS — Greyscale ramp
     ---------------------------------------------------------- */
  --color-grey-50:        #F7F7F7;
  --color-grey-100:       #E8E8E8;
  --color-grey-200:       #C8C8C8;
  --color-grey-300:       #A0A0A0;
  --color-grey-400:       #787878;
  --color-grey-500:       #545454;
  --color-grey-600:       #3A3A3A;
  --color-grey-700:       #242424;
  --color-grey-800:       #141414;
  --color-grey-900:       #0A0A0A;

  /* ----------------------------------------------------------
     COLOURS — Semantic UI aliases
     ---------------------------------------------------------- */
  --color-text-primary:   #FFFFFF;         /* Default text on dark bg */
  --color-text-secondary: rgba(255,255,255,0.6);
  --color-text-muted:     rgba(255,255,255,0.35);
  --color-text-inverse:   #051008;         /* Text on light surfaces */

  --color-surface:        #0D1A10;         /* Slightly elevated surface */
  --color-surface-2:      #142018;         /* Cards, panels */
  --color-border:         rgba(80,200,120,0.15); /* Subtle mint border */
  --color-border-strong:  rgba(80,200,120,0.35);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font families
     ---------------------------------------------------------- */
  --font-heading:   'Syne', sans-serif;
  --font-body:      'Manrope', sans-serif;
  --font-accent:    'Cormorant Garamond', Georgia, serif;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Heading scale (Syne, bold)
     ---------------------------------------------------------- */
  --text-h1-size:     40px;
  --text-h1-weight:   700;
  --text-h1-lh:       1.4;    /* 140% */

  --text-h2-size:     36px;
  --text-h2-weight:   700;
  --text-h2-lh:       1.4;

  --text-h3-size:     32px;
  --text-h3-weight:   700;
  --text-h3-lh:       1.4;

  --text-h4-size:     28px;
  --text-h4-weight:   700;
  --text-h4-lh:       1.5;

  --text-h5-size:     24px;
  --text-h5-weight:   700;
  --text-h5-lh:       1.5;

  --text-h6-size:     20px;
  --text-h6-weight:   600;
  --text-h6-lh:       1.5;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Body scale (Manrope)
     ---------------------------------------------------------- */
  --text-large-size:   20px;
  --text-large-weight: 400;
  --text-large-lh:     1.6;

  --text-base-size:    16px;
  --text-base-weight:  400;
  --text-base-lh:      1.6;

  --text-button-size:  16px;
  --text-button-weight:500;
  --text-button-lh:    1.6;

  --text-caption-size: 12px;
  --text-caption-lh:   1.6;

  --text-overline-size:10px;
  --text-overline-lh:  1.6;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Accent scale (Cormorant Garamond)
     ---------------------------------------------------------- */
  --text-accent-large-size:   20px;
  --text-accent-base-size:    16px;
  --text-accent-caption-size: 12px;
  --text-accent-overline-size:10px;

  /* ----------------------------------------------------------
     SPACING — 4px base scale
     ---------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   40px;
  --space-7:   48px;
  --space-8:   56px;
  --space-9:   64px;

  /* Semantic spacing aliases */
  --space-xs:  var(--space-1);   /* 4px  */
  --space-sm:  var(--space-2);   /* 8px  */
  --space-md:  var(--space-3);   /* 16px */
  --space-lg:  var(--space-4);   /* 24px */
  --space-xl:  var(--space-5);   /* 32px */
  --space-2xl: var(--space-6);   /* 40px */
  --space-3xl: var(--space-7);   /* 48px */
  --space-4xl: var(--space-9);   /* 64px */

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --max-width:        1100px;
  --max-width-text:   680px;
  --gutter:           2rem;
}

/* ============================================================
   BASE RESET & DEFAULTS
   Applies brand tokens as the default rendering for all
   custom templates that use .ds-page wrapper.
   ============================================================ */
.ds-page {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base-size);
  font-weight: var(--text-base-weight);
  line-height: var(--text-base-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-page h1, .ds-page h2, .ds-page h3,
.ds-page h4, .ds-page h5, .ds-page h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.ds-page h1 { font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); line-height: var(--text-h1-lh); }
.ds-page h2 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); line-height: var(--text-h2-lh); }
.ds-page h3 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); line-height: var(--text-h3-lh); }
.ds-page h4 { font-size: var(--text-h4-size); font-weight: var(--text-h4-weight); line-height: var(--text-h4-lh); }
.ds-page h5 { font-size: var(--text-h5-size); font-weight: var(--text-h5-weight); line-height: var(--text-h5-lh); }
.ds-page h6 { font-size: var(--text-h6-size); font-weight: var(--text-h6-weight); line-height: var(--text-h6-lh); }

.ds-page p {
  font-family: var(--font-body);
  font-size: var(--text-base-size);
  line-height: var(--text-base-lh);
  color: var(--color-text-secondary);
  margin: 0;
}

.ds-page a {
  color: var(--color-mint);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.ds-page a:hover { opacity: 0.8; }

/* ----------------------------------------------------------
   UTILITY CLASSES
   ---------------------------------------------------------- */

/* Container */
.ds-container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Accent font */
.ds-accent-font {
  font-family: var(--font-accent);
  font-style: italic;
}

/* Text sizes */
.ds-text-large   { font-size: var(--text-large-size);   line-height: var(--text-large-lh); }
.ds-text-base    { font-size: var(--text-base-size);    line-height: var(--text-base-lh); }
.ds-text-caption { font-size: var(--text-caption-size); line-height: var(--text-caption-lh); }
.ds-overline     { font-size: var(--text-overline-size); line-height: var(--text-overline-lh); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }

/* Colour utilities */
.ds-text-mint    { color: var(--color-mint); }
.ds-text-muted   { color: var(--color-text-muted); }
.ds-text-secondary { color: var(--color-text-secondary); }
.ds-bg-surface   { background-color: var(--color-surface); }
.ds-bg-surface-2 { background-color: var(--color-surface-2); }

/* ----------------------------------------------------------
   COMPONENTS
   ---------------------------------------------------------- */

/* Button — Primary */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: 1;
  padding: 14px var(--space-lg);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.ds-btn-primary {
  background: var(--color-mint);
  color: var(--color-primary);
}
.ds-btn-primary:hover {
  background: #6dd68e;
  color: var(--color-primary);
  opacity: 1;
  transform: translateY(-1px);
}

.ds-btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}
.ds-btn-outline:hover {
  border-color: var(--color-mint);
  color: var(--color-mint);
  opacity: 1;
}

/* Card */
.ds-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.ds-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

/* Badge / Tag */
.ds-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-overline-size);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(80, 200, 120, 0.15);
  color: var(--color-mint);
  border: 1px solid rgba(80, 200, 120, 0.25);
}

/* Divider */
.ds-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* Section spacing */
.ds-section {
  padding: var(--space-4xl) 0;
}
.ds-section-sm {
  padding: var(--space-xl) 0;
}

/* Responsive */
@media (max-width: 768px) {
  :root {
    --text-h1-size: 28px;
    --text-h2-size: 24px;
    --text-h3-size: 22px;
    --text-h4-size: 20px;
    --text-h5-size: 18px;
    --gutter: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-h1-size: 24px;
    --text-h2-size: 20px;
    --text-h3-size: 18px;
  }
}