/* ============================================================
   Flavien PRADIER — SISR Portfolio Design System
   colors_and_type.css
   All design tokens as CSS custom properties.
   ============================================================ */

/* ── Self-hosted DM Sans (variable font) ── */
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {

  /* ─── NAVY BLUES (Primary) ─── */
  --color-navy-950:  #071526;   /* Deepest navy — heavy text on light */
  --color-navy-900:  #0D2240;   /* Primary navy — headings, logo, main buttons */
  --color-navy-800:  #163258;   /* Hover state for navy buttons */
  --color-navy-700:  #1E3E70;
  --color-navy-600:  #265090;
  --color-navy-400:  #3B7AC7;   /* Lighter navy — links, subtle accents */

  /* ─── CYAN / AQUA (Accent) ─── */
  --color-cyan-600:  #0490A8;   /* Deep cyan — for text on light cyan bg */
  --color-cyan-500:  #06B0C8;   /* Primary accent — buttons, tags, icon tints */
  --color-cyan-400:  #12C8E0;   /* Hover state for cyan */
  --color-cyan-300:  #4DD9ED;
  --color-cyan-200:  #7DE8F5;
  --color-cyan-100:  #D0F4FA;   /* Tag border */
  --color-cyan-50:   #EBF9FD;   /* Tag background, icon container bg */

  /* ─── NEUTRALS ─── */
  --color-white:     #FFFFFF;
  --color-gray-50:   #F9FAFB;   /* Alternating section backgrounds */
  --color-gray-100:  #F3F4F6;   /* Skill tags bg, hover states */
  --color-gray-200:  #E5E7EB;   /* Card borders, dividers */
  --color-gray-300:  #D1D5DB;   /* Input borders, subtle lines */
  --color-gray-400:  #9CA3AF;   /* Placeholder text, nav link rest */
  --color-gray-500:  #6B7280;   /* Secondary text, descriptions */
  --color-gray-700:  #374151;   /* Primary body text */
  --color-gray-900:  #111827;   /* Near-black text */

  /* ─── STATUS COLORS ─── */
  --color-green-50:  #D1FAE5;
  --color-green-600: #16A34A;   /* Completed badge */
  --color-amber-50:  #FEF3C7;
  --color-amber-700: #92400E;   /* In-progress badge */

  /* ─── SEMANTIC ALIASES ─── */
  --fg-primary:      var(--color-navy-900);       /* Headings, strong text */
  --fg-body:         var(--color-gray-700);        /* Body text */
  --fg-secondary:    var(--color-gray-500);        /* Descriptions, meta */
  --fg-muted:        var(--color-gray-400);        /* Placeholders, dates */
  --fg-accent:       var(--color-cyan-500);        /* Accent labels, tags */

  --bg-page:         var(--color-white);           /* Main page bg */
  --bg-section:      var(--color-gray-50);         /* Alternate sections */
  --bg-card:         var(--color-white);           /* Card backgrounds */
  --bg-tag:          var(--color-cyan-50);         /* Cyan tag bg */
  --bg-skill-tag:    var(--color-gray-100);        /* Neutral skill tag bg */
  --bg-icon:         var(--color-cyan-50);         /* Icon container bg */
  --bg-nav:          rgba(255, 255, 255, 0.85);    /* Glassmorphism nav */

  --border-card:     var(--color-gray-200);
  --border-tag:      var(--color-cyan-100);

  /* ─── TYPOGRAPHY ─── */
  /* @font-face for 'DM Sans' will be added when font files are uploaded */
  --font-sans:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Scale */
  --text-xs:         11px;
  --text-sm:         13px;
  --text-base:       16px;
  --text-md:         17px;
  --text-lg:         20px;
  --text-xl:         24px;
  --text-2xl:        30px;
  --text-3xl:        40px;
  --text-4xl:        52px;
  --text-hero:       clamp(38px, 5.5vw, 62px);

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter spacing */
  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.08em;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.75;

  /* Semantic type */
  --h1-size:         var(--text-hero);
  --h1-weight:       var(--weight-bold);
  --h1-tracking:     var(--tracking-tight);
  --h1-leading:      1.08;
  --h1-color:        var(--fg-primary);

  --h2-size:         clamp(28px, 4vw, 40px);
  --h2-weight:       var(--weight-bold);
  --h2-tracking:     -0.03em;
  --h2-leading:      1.15;
  --h2-color:        var(--fg-primary);

  --h3-size:         var(--text-md);
  --h3-weight:       var(--weight-bold);
  --h3-tracking:     -0.02em;

  --body-size:       var(--text-base);
  --body-weight:     var(--weight-regular);
  --body-color:      var(--fg-body);
  --body-leading:    var(--leading-relaxed);

  --label-size:      var(--text-xs);
  --label-weight:    var(--weight-semibold);
  --label-tracking:  var(--tracking-wider);

  /* ─── SPACING ─── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28: 112px;

  /* ─── BORDER RADII ─── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* ─── SHADOWS ─── */
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.10), 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-nav:   0 1px 20px rgba(0, 0, 0, 0.06);
  --shadow-btn:   0 8px 24px rgba(13, 34, 64, 0.25);
  --shadow-glow:  0 0 0 3px rgba(6, 176, 200, 0.18);

  /* ─── TRANSITIONS ─── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --transition:  all 0.25s var(--ease-out);

  /* ─── LAYOUT ─── */
  --max-width:   1200px;
  --nav-height:  64px;
  --section-py:  100px;
}

/* ─── UTILITY CLASSES (optional) ─── */

.text-h1 {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  color: var(--h1-color);
}

.text-h2 {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  color: var(--h2-color);
}

.text-h3 {
  font-family: var(--font-sans);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
}

.text-body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--body-color);
}

.text-label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}