/* ============================================================
   DESIGN TOKENS — Paige Reidarson Portfolio
   Source: Figma / Webflow_2026 / 2026 page / Styleguide
   ============================================================ */

/* ------------------------------------------------------------
   COLOR PALETTE
   ------------------------------------------------------------ */
:root {
  /* Grey */
  --color-grey-100: #0D0D0D;
  --color-grey-200: #1F1F1F;
  --color-grey-300: #2E2E2E;
  --color-grey-400: #4A4A4A;
  --color-grey-500: #7A7A7A;
  --color-grey-600: #969696;
  --color-grey-700: #BFBFBF;
  --color-grey-800: #E3E3E3;

  /* Lime */
  --color-lime-100: #222107;
  --color-lime-200: #32310B;
  --color-lime-300: #504D11;
  --color-lime-400: #7E782A;
  --color-lime-500: #B1A93B;
  --color-lime-600: #B8B56F;
  --color-lime-700: #D2D2AD;
  --color-lime-800: #EFEDE6;

  /* Rose */
  --color-rose-100: #271625;
  --color-rose-200: #351F33;
  --color-rose-300: #573353;
  --color-rose-400: #81377B;
  --color-rose-500: #A33E9A;
  --color-rose-600: #B86FB4;
  --color-rose-700: #D2ACCF;
  --color-rose-800: #EFE6EE;

  /* Cyan */
  --color-cyan-100: #162227;
  --color-cyan-200: #1F2E35;
  --color-cyan-300: #354E5A;
  --color-cyan-400: #33637A;
  --color-cyan-500: #1274A6;
  --color-cyan-600: #70A0B8;
  --color-cyan-700: #ACC5D2;
  --color-cyan-800: #E5ECF0;

  /* ------------------------------------------------------------
     SPACING
     desktop: lg=24, xl=32, 2xl=64, 3xl=128
     tablet/mobile: lg=20, xl=24, 2xl=48, 3xl=96
     ------------------------------------------------------------ */
  --size-none: 0px;
  --size-xs:   4px;
  --size-sm:   8px;
  --size-md:   16px;
  --size-lg:   clamp(20px, calc(17.14px + 0.762vw), 24px);
  --size-xl:   clamp(24px, calc(18.29px + 1.524vw), 32px);
  --size-2xl:  clamp(48px, calc(36.57px + 3.048vw), 64px);
  --size-3xl:  clamp(96px, calc(73.14px + 6.095vw), 128px);

  /* ------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------ */
  --radius-sm:  8px;    /* → size/sm */
  --radius-md:  64px;   /* → size/2xl (desktop) */
  --radius-lg:  128px;  /* → size/3xl (desktop) */

  /* ------------------------------------------------------------
     TYPOGRAPHY — Families & Weights
     ------------------------------------------------------------ */
  --font-decorative: 'Figtree', sans-serif;
  --font-utility:    'Inter', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ------------------------------------------------------------
     TYPOGRAPHY — Fluid Scale
     Viewport range: 390px (min) → 1440px (max)
     Formula: clamp(min, intercept + slope*vw, max)

     .text-500  Figtree Medium   56px → 80px
     .text-400  Figtree Medium   40px → 56px
     .text-300  Figtree Medium   28px → 40px
     .text-200  Figtree Medium   22px → 28px
     .text-100  Inter Regular    20px (fixed)
     .text-50   Inter Medium     16px (fixed)
     ------------------------------------------------------------ */
  --text-500: clamp(3.5rem,  calc(2.943rem + 2.286vw), 5rem);
  --text-400: clamp(2.5rem,  calc(2.129rem + 1.524vw), 3.5rem);
  --text-300: clamp(1.75rem, calc(1.471rem + 1.143vw), 2.5rem);
  --text-200: clamp(1.375rem,calc(1.236rem + 0.571vw), 1.75rem);
  --text-100: 1.25rem;
  --text-50:  1rem;

  /* ------------------------------------------------------------
     SEMANTIC TOKENS
     Primitives above; components consume these semantic aliases.
     ------------------------------------------------------------ */

  /* Text */
  --color-text-primary:   var(--color-grey-800);
  --color-text-secondary: var(--color-grey-600);
  --color-text-tertiary:  var(--color-grey-500);

  /* Border */
  --color-border-default:       var(--color-grey-300);
  --color-border-accent-lime:   var(--color-lime-500);
  --color-border-accent-rose:   var(--color-rose-500);
  --color-border-accent-cyan:   var(--color-cyan-500);

  /* Surface */
  --color-surface-default:      var(--color-grey-100);
  --color-surface-accent-olive: var(--color-lime-200);
}

/* ------------------------------------------------------------
   TYPOGRAPHY UTILITY CLASSES
   ------------------------------------------------------------ */
.text-500 {
  font-family: var(--font-decorative);
  font-size: var(--text-500);
  font-weight: var(--font-weight-medium);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.text-400 {
  font-family: var(--font-decorative);
  font-size: var(--text-400);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.text-300 {
  font-family: var(--font-decorative);
  font-size: var(--text-300);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.text-200 {
  font-family: var(--font-decorative);
  font-size: var(--text-200);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.text-100 {
  font-family: var(--font-utility);
  font-size: var(--text-100);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

.text-50 {
  font-family: var(--font-utility);
  font-size: var(--text-50);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}