/* ============================================================
   JUMIX DESIGN SYSTEM — Colors & Typography
   Brand Identity Guidelines 2022 Ver 2.0
   ============================================================ */

/* ---- Articulat CF — Licensed Brand Font (loaded from fonts/) ----
   FreightDisp Pro → Cormorant Garamond (Google Fonts substitute — no TTF provided)
   ⚠️  FLAG: FreightDisp Pro still substituted. Supply font files to complete.
   ----------------------------------------------------------------- */
@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&display=swap');

/* Articulat CF — full weight stack */
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-ThinOblique.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-LightOblique.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-Normal.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-NormalOblique.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-MediumOblique.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-DemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-DemiBoldOblique.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-BoldOblique.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-ExtraBoldOblique.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-Heavy.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Articulat CF'; src: url('fonts/ArticulatCF-HeavyOblique.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* ============================================================
   BASE COLOR TOKENS
   ============================================================ */
:root {

  /* --- Primary Palette --- */
  --color-dark-black:  #17171A;
  --color-white:       #FFFFFF;
  --color-platinum:    #E5E5E5;

  /* --- Secondary Palette --- */
  --color-orange:      #FF5000;
  --color-quartz:      #4C4D4E;
  --color-champagne:   #FED2A5;
  --color-pearl:       #FDF1D7;

  /* --- Grayscale --- */
  --color-black:       #000000;
  --color-gray:        #8E8E8E;
  --color-gray-light:  #DBDBDC;

  /* --- Orange Tints --- */
  --color-orange-80:   #FF7333;
  --color-orange-50:   #FFA880;
  --color-orange-20:   #FFDCCC;

  /* --- Quartz Tints --- */
  --color-quartz-80:   #707171;
  --color-quartz-50:   #A6A6A7;
  --color-quartz-20:   #DBDBDC;

  /* --- Champagne Tints --- */
  --color-champagne-80: #FEDBB7;
  --color-champagne-50: #FFE9D2;
  --color-champagne-20: #FFF6ED;

  /* --- Pearl Tints --- */
  --color-pearl-80:    #FDF4DF;
  --color-pearl-50:    #FEF8EB;
  --color-pearl-20:    #FFFCF7;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */

  /* Backgrounds */
  --bg-primary:        var(--color-dark-black);
  --bg-secondary:      var(--color-white);
  --bg-muted:          var(--color-platinum);
  --bg-accent:         var(--color-orange);
  --bg-warm:           var(--color-pearl);

  /* Foregrounds */
  --fg-primary:        var(--color-dark-black);
  --fg-on-dark:        var(--color-white);
  --fg-muted:          var(--color-quartz);
  --fg-accent:         var(--color-orange);
  --fg-subtle:         var(--color-gray);

  /* Borders */
  --border-default:    var(--color-platinum);
  --border-dark:       var(--color-quartz);
  --border-accent:     var(--color-orange);

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

  /* Font Families */
  --font-primary:      'Articulat CF', sans-serif;
  --font-display:      'Cormorant Garamond', 'FreightDisp Pro', serif;

  /* Font Weights */
  --weight-thin:       300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-demi:       600;
  --weight-bold:       700;
  --weight-extra-bold: 800;

  /* Type Scale — Digital (px) */
  --text-overline:     20px;
  --text-body-sm:      16px;
  --text-body:         24px;
  --text-caption:      14px;
  --text-h3:           36px;
  --text-h2:           48px;
  --text-h1:           72px;
  --text-display:      96px;

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

  /* Letter Spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.15em;

  /* ============================================================
     SPACING SCALE (multiples of 4pt)
     ============================================================ */
  --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;

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

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --shadow-sm:  0 1px 3px rgba(23,23,26,0.12);
  --shadow-md:  0 4px 16px rgba(23,23,26,0.12);
  --shadow-lg:  0 12px 40px rgba(23,23,26,0.16);
  --shadow-xl:  0 24px 64px rgba(23,23,26,0.20);

  /* ============================================================
     ANIMATION / TRANSITIONS
     ============================================================ */
  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.display {
  font-family: var(--font-primary);
  font-size: var(--text-display);
  font-weight: var(--weight-demi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 {
  font-family: var(--font-primary);
  font-size: var(--text-h1);
  font-weight: var(--weight-demi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--text-h2);
  font-weight: var(--weight-demi);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  font-family: var(--font-primary);
  font-size: var(--text-h3);
  font-weight: var(--weight-demi);
  line-height: var(--leading-snug);
}

.overline {
  font-family: var(--font-primary);
  font-size: var(--text-overline);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

p, .body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.body-sm {
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

.caption {
  font-family: var(--font-primary);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* Display headline using serif (FreightDisp Pro substitute) */
.display-serif {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  font-style: italic;
}