/* ============================================================
   Rui Lopes Digital — Design System
   colors_and_type.css
   ============================================================ */

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

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Brand Colors */
  --color-navy:        #0D1F3C;
  --color-navy-light:  #162B54;
  --color-blue:        #1B4FD8;
  --color-blue-light:  #3B6FFF;
  --color-blue-pale:   #EBF0FD;
  --color-pink:        #E8195A;
  --color-pink-light:  #FF3D77;
  --color-pink-pale:   #FDEDF3;
  --color-yellow:      #F5C400;
  --color-yellow-dark: #D4A800;
  --color-yellow-pale: #FEF9E5;
  --color-cream:       #F5F0E8;
  --color-white:       #FFFFFF;

  /* Neutral Scale */
  --color-grey-50:     #FAFAFA;
  --color-grey-100:    #F2F2F2;
  --color-grey-200:    #E8E8E8;
  --color-grey-300:    #D4D4D4;
  --color-grey-400:    #ABABAB;
  --color-grey-500:    #8C8C8C;
  --color-grey-600:    #6B6B6B;
  --color-grey-700:    #4A4A4A;
  --color-grey-800:    #2E2E2E;
  --color-grey-900:    #1A1A1A;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */
  --color-bg-primary:     var(--color-white);
  --color-bg-secondary:   var(--color-cream);
  --color-bg-dark:        var(--color-navy);
  --color-bg-accent:      var(--color-blue);

  --color-text-primary:   var(--color-grey-900);
  --color-text-secondary: var(--color-grey-600);
  --color-text-muted:     var(--color-grey-400);
  --color-text-inverse:   var(--color-white);
  --color-text-link:      var(--color-blue);
  --color-text-link-hover:var(--color-blue-light);

  --color-border:         var(--color-grey-200);
  --color-border-focus:   var(--color-blue);

  --color-brand-primary:  var(--color-navy);
  --color-brand-accent:   var(--color-blue);
  --color-brand-pop:      var(--color-pink);
  --color-brand-highlight:var(--color-yellow);

  --color-success:        #1DB97A;
  --color-warning:        #F5A623;
  --color-error:          #E83F3F;
  --color-info:           var(--color-blue);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* Font Families */
  --font-display:  'Syne', sans-serif;
  --font-body:     'Plus Jakarta Sans', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Font Weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Type Scale — Desktop */
  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-md:       1.125rem;   /* 18px */
  --text-lg:       1.25rem;    /* 20px */
  --text-xl:       1.5rem;     /* 24px */
  --text-2xl:      1.875rem;   /* 30px */
  --text-3xl:      2.25rem;    /* 36px */
  --text-4xl:      3rem;       /* 48px */
  --text-5xl:      3.75rem;    /* 60px */
  --text-6xl:      4.5rem;     /* 72px */

  /* Line Heights */
  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.7;

  /* Letter Spacing */
  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-wide:       0.05em;
  --ls-wider:      0.1em;
  --ls-widest:     0.15em;

  /* ============================================================
     SEMANTIC TYPE ROLES
     ============================================================ */
  --type-h1-size:         var(--text-5xl);
  --type-h1-weight:       var(--fw-extrabold);
  --type-h1-family:       var(--font-display);
  --type-h1-lh:           var(--lh-tight);
  --type-h1-ls:           var(--ls-tight);

  --type-h2-size:         var(--text-4xl);
  --type-h2-weight:       var(--fw-bold);
  --type-h2-family:       var(--font-display);
  --type-h2-lh:           var(--lh-snug);
  --type-h2-ls:           var(--ls-tight);

  --type-h3-size:         var(--text-2xl);
  --type-h3-weight:       var(--fw-bold);
  --type-h3-family:       var(--font-display);
  --type-h3-lh:           var(--lh-snug);

  --type-h4-size:         var(--text-xl);
  --type-h4-weight:       var(--fw-semibold);
  --type-h4-family:       var(--font-body);
  --type-h4-lh:           var(--lh-snug);

  --type-body-size:       var(--text-base);
  --type-body-weight:     var(--fw-regular);
  --type-body-family:     var(--font-body);
  --type-body-lh:         var(--lh-relaxed);

  --type-body-lg-size:    var(--text-md);
  --type-body-sm-size:    var(--text-sm);

  --type-label-size:      var(--text-xs);
  --type-label-weight:    var(--fw-semibold);
  --type-label-ls:        var(--ls-widest);
  --type-label-transform: uppercase;

  --type-caption-size:    var(--text-xs);
  --type-caption-weight:  var(--fw-regular);
  --type-caption-color:   var(--color-text-secondary);

  /* ============================================================
     SPACING SYSTEM (base 8px)
     ============================================================ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm:   0 2px 8px rgba(13, 31, 60, 0.08);
  --shadow-md:   0 4px 24px rgba(13, 31, 60, 0.12);
  --shadow-lg:   0 12px 48px rgba(13, 31, 60, 0.18);
  --shadow-xl:   0 24px 80px rgba(13, 31, 60, 0.22);
  --shadow-blue: 0 8px 32px rgba(27, 79, 216, 0.28);
  --shadow-pink: 0 8px 32px rgba(232, 25, 90, 0.28);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:  1200px;
  --container-wide: 1440px;
  --nav-height:     72px;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
}

h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
}

h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
}

h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-lh);
}

p {
  font-size: var(--type-body-size);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

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

a:hover {
  color: var(--color-text-link-hover);
}

.label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.caption {
  font-size: var(--type-caption-size);
  color: var(--type-caption-color);
}