/**
 * Design tokens for The Review Room, copied from
 * clients/Forging Tomorrow/skill-export/forging-tomorrow-design/colors_and_type.css
 * (never re-derived). Font-family variables point at Newsreader/Archivo
 * ("The Storyteller" pair, locked 2026-07-14) rather than the Fraunces/Inter
 * values still in that source file pending its brand-doc pass.
 */

:root {
	--ft-orange:        #F06020;
	--ft-orange-600:    #D9521A;
	--ft-orange-700:    #B8430F;
	--ft-orange-200:    #FBC9AE;
	--ft-orange-100:    #FDE3D3;
	--ft-orange-50:     #FEF3EB;

	--ft-teal:          #0E4A48;
	--ft-teal-light:    #1D6B67;
	--ft-teal-deep:     #09302E;
	--ft-teal-muted:    #516A68;

	--ft-ink:           #0F0F10;
	--ft-ink-2:         #2A2A2C;
	--ft-ink-3:         #5C5C60;
	--ft-ink-4:         #8C8C92;
	--ft-line:          #E6E1DA;
	--ft-line-strong:   #C9C2B7;
	--ft-paper:         #FFFFFF;
	--ft-cream:         #FBF7F2;
	--ft-cream-2:       #F4EEE5;
	--ft-charcoal:      #1A1A1B;
	--ft-charcoal-2:    #232325;

	--ft-bg:            var(--ft-paper);
	--ft-bg-alt:        var(--ft-cream);
	--ft-bg-dark:       var(--ft-charcoal);
	--ft-fg:            var(--ft-ink);
	--ft-fg-muted:      var(--ft-ink-3);
	--ft-fg-subtle:     var(--ft-ink-4);
	--ft-fg-on-dark:    #FBF7F2;
	--ft-fg-on-orange:  #FFFFFF;
	--ft-accent:        var(--ft-orange);
	--ft-link:          var(--ft-orange-600);
	--ft-success:       #2F7D4F;
	--ft-warning:       #C68A1E;
	--ft-danger:        #B33A2A;

	--ft-font-display: 'Newsreader', 'Iowan Old Style', 'Cambria', Georgia, serif;
	--ft-font-body:    'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

	--ft-text-xs:   12px;
	--ft-text-sm:   14px;
	--ft-text-base: 16px;
	--ft-text-md:   18px;
	--ft-text-lg:   20px;
	--ft-text-xl:   24px;
	--ft-text-2xl:  32px;
	--ft-text-3xl:  44px;
	--ft-text-4xl:  60px;

	--ft-space-1:  4px;
	--ft-space-2:  8px;
	--ft-space-3:  12px;
	--ft-space-4:  16px;
	--ft-space-5:  24px;
	--ft-space-6:  32px;
	--ft-space-7:  48px;
	--ft-space-8:  64px;
	--ft-space-9:  96px;

	--ft-radius-xs: 2px;
	--ft-radius-sm: 4px;
	--ft-radius-md: 8px;
	--ft-radius-lg: 14px;
	--ft-radius-xl: 22px;
	--ft-radius-pill: 999px;

	--ft-shadow-xs: 0 1px 2px rgba(15,15,16,.06);
	--ft-shadow-sm: 0 2px 6px rgba(15,15,16,.06), 0 1px 2px rgba(15,15,16,.04);
	--ft-shadow-md: 0 8px 24px rgba(15,15,16,.08), 0 2px 6px rgba(15,15,16,.04);
	--ft-shadow-lg: 0 24px 60px rgba(15,15,16,.12), 0 6px 14px rgba(15,15,16,.06);
	--ft-shadow-orange: 0 14px 40px rgba(240,96,32,.28);

	--ft-border:        1px solid var(--ft-line);
	--ft-border-strong: 1px solid var(--ft-line-strong);
	--ft-border-ink:    1.5px solid var(--ft-ink);

	--ft-ease:        cubic-bezier(.22, .61, .36, 1);
	--ft-ease-out:    cubic-bezier(.16, 1, .3, 1);
	--ft-dur-fast:    140ms;
	--ft-dur:         220ms;
	--ft-dur-slow:    420ms;
}
