/* ============================================================
   PATHFINDER IT - Design Tokens
   tokens.css  (ported from the design bundle's colors_and_type.css)
   Fonts are self-hosted: no external font CDN, so the CSP stays 'self'.
   ============================================================ */

/* Rethink Sans - local variable font files */
@font-face {
  font-family: 'Rethink Sans';
  src: url('/static/fonts/RethinkSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rethink Sans';
  src: url('/static/fonts/RethinkSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono - self-hosted woff2 (latin), weights 400 / 500 / 700 */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* Brand */
  --color-primary:          #F33F5E;
  --color-primary-hover:    #E0294B;
  --color-primary-tint:     #FFF0F3;
  --color-primary-glow:     rgba(243, 63, 94, 0.35);
  --color-primary-text:     #BE123C;

  --color-secondary:        #00C2A8;
  --color-secondary-hover:  #00A891;
  --color-secondary-tint:   #E8FAF8;
  --color-secondary-glow:   rgba(0, 194, 168, 0.3);
  --color-secondary-text:   #007063;
  --color-secondary-text-on-tint: #006B5E;

  /* Neutrals - dark scale */
  --color-dark:             #12131A;
  --color-surface-dark:     #1C1D27;
  --color-surface-mid:      #2A2B38;
  --color-surface-high:     #35364A;
  --color-border-dark:      rgba(255, 255, 255, 0.07);
  --color-border-dark-mid:  rgba(255, 255, 255, 0.12);

  /* Neutrals - light scale */
  --color-surface-light:    #F5F5F8;
  --color-surface-white:    #FFFFFF;
  --color-border-light:     #E4E4EE;

  /* Foreground */
  --color-fg1:              #12131A;
  --color-fg2:              #5A5B6A;
  --color-fg3:              #9A9BAA;
  --color-fg-on-dark:       #FFFFFF;
  --color-fg2-on-dark:      rgba(255, 255, 255, 0.65);
  --color-fg3-on-dark:      rgba(255, 255, 255, 0.35);

  /* Semantic - base */
  --color-success:          #2ECC71;
  --color-success-tint:     #E8FAF0;
  --color-warning:          #F5A623;
  --color-warning-tint:     #FEF6E7;
  --color-error:            #F33F5E;
  --color-error-tint:       #FFF0F3;
  --color-info:             #3B9EF5;
  --color-info-tint:        #EBF4FF;

  /* Semantic - accessible text colors on tints */
  --color-success-text:     #15803D;
  --color-warning-text:     #92400E;
  --color-error-text:       #BE123C;
  --color-info-text:        #1A6EC2;

  /* Font families */
  --font-sans:   'Rethink Sans', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Font weights */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  /* Type scale */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   52px;
  --text-5xl:   64px;
  --text-6xl:   80px;

  /* Line heights */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* Spacing */
  --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-24:  96px;
  --space-32:  128px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-low:     0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-mid:     0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-high:    0 8px 40px rgba(0, 0, 0, 0.25);
  --shadow-primary: 0 4px 24px rgba(243, 63, 94, 0.35);
  --shadow-secondary: 0 4px 24px rgba(0, 194, 168, 0.3);

  /* Animation */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-micro:    100ms;
  --duration-standard: 200ms;
  --duration-expressive: 400ms;
}