/* Weenjoy Design System — Colors & Type Tokens
   Use this file as the single source of truth in every artifact.
   Import with: <link rel="stylesheet" href="../colors_and_type.css"> (path relative)
*/

/* --- Inter (variable) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/assets/fonts/InterVariable.woff2') format('woff2');
}

:root {
  /* === Brand =========================================================== */
  --weenjoy-red:        #FF2D2D;   /* primary brand */
  --weenjoy-red-press:  #E11A1A;   /* darker for press states */
  --weenjoy-red-soft:   #FFE5E5;   /* tinted bg */
  --weenjoy-red-50:     #FFF1F1;
  --weenjoy-red-100:    #FFE0E0;
  --weenjoy-red-200:    #FFB3B3;
  --weenjoy-red-300:    #FF7E7E;
  --weenjoy-red-400:    #FF5252;
  --weenjoy-red-500:    #FF2D2D;
  --weenjoy-red-600:    #E11A1A;
  --weenjoy-red-700:    #B81515;
  --weenjoy-red-800:    #8B0F0F;
  --weenjoy-red-900:    #5A0808;

  /* === Product accents (one per app) =================================== */
  --accent-consumer:    #FF2D2D;   /* Weenjoy app — same as red */
  --accent-business:    #FF6B2C;   /* Weenjoy for Business */
  --accent-pos:         #E8338E;   /* Weenjoy POS */
  --accent-win:         #1FB670;   /* WIN affiliators */

  /* === Supporting palette (illustration accents) ======================= */
  --color-yellow:       #FFC93B;
  --color-sky:          #3FB7E8;
  --color-cobalt:       #2C7BE5;
  --color-emerald:      #1FB670;
  --color-magenta:      #E8338E;
  --color-orange:       #FF6B2C;

  /* === Neutrals (warm slate, not cool grey) ============================ */
  --ink-900:            #0F1115;   /* primary text */
  --ink-800:            #1F2228;
  --ink-700:            #353941;
  --ink-600:            #4F545E;   /* secondary text */
  --ink-500:            #6B7180;   /* tertiary */
  --ink-400:            #9AA0A6;   /* placeholder */
  --ink-300:            #C9CBCF;   /* disabled fg */
  --ink-200:            #E1E1DD;   /* hairline border-strong */
  --ink-150:            #EAEAE5;   /* hairline border default */
  --ink-100:            #F2F1EC;   /* row hover / divider */
  --ink-50:             #FAFAF7;   /* app background — warm off-white */

  --surface:            #FFFFFF;
  --surface-bg:         #FAFAF7;
  --surface-sunken:     #F2F1EC;

  /* === Semantic ======================================================== */
  --success:            #1FB670;
  --success-soft:       #E5F7EE;
  --warning:            #F4A93B;
  --warning-soft:       #FFF3DC;
  --danger:             #D8341B;
  --danger-soft:        #FFE5E0;
  --info:               #3FB7E8;
  --info-soft:          #E1F4FB;

  /* === Foreground / Background tokens (semantic) ======================= */
  --fg-1:               var(--ink-900);  /* primary text */
  --fg-2:               var(--ink-600);  /* secondary text */
  --fg-3:               var(--ink-500);  /* tertiary / meta */
  --fg-on-red:          #FFFFFF;
  --fg-on-dark:         #FFFFFF;

  --bg-app:             var(--ink-50);
  --bg-card:            var(--surface);
  --bg-sunken:          var(--surface-sunken);

  --border-default:     var(--ink-150);
  --border-strong:      var(--ink-200);
  --border-focus:       var(--weenjoy-red);

  /* === Type families =================================================== */
  --font-sans:          'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-numeric:       'Inter', system-ui, sans-serif;

  /* === Type scale (semantic) =========================================== */
  --type-display-1:     800 56px/1.05 var(--font-sans);
  --type-display-2:     800 44px/1.08 var(--font-sans);
  --type-h1:            800 32px/1.15 var(--font-sans);
  --type-h2:            700 24px/1.25 var(--font-sans);
  --type-h3:            700 20px/1.3  var(--font-sans);
  --type-h4:            700 17px/1.35 var(--font-sans);
  --type-body-lg:       400 18px/1.55 var(--font-sans);
  --type-body:          400 16px/1.55 var(--font-sans);
  --type-body-sm:       400 14px/1.5  var(--font-sans);
  --type-caption:       500 12px/1.4  var(--font-sans);
  --type-eyebrow:       700 11px/1.3  var(--font-sans);
  --type-button:        600 16px/1    var(--font-sans);
  --type-numeric-xl:    800 40px/1    var(--font-numeric);
  --type-numeric-lg:    800 28px/1    var(--font-numeric);
  --type-numeric:       700 18px/1    var(--font-numeric);

  --tracking-display:   -0.03em;
  --tracking-eyebrow:   0.08em;

  /* === Spacing (8pt grid) ============================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* === Radius ========================================================== */
  --radius-input:  12px;
  --radius-card:   20px;
  --radius-sheet:  24px;
  --radius-pill:   999px;
  --radius-chip:   999px;

  /* === Shadows (warm, never cool) ====================================== */
  --shadow-e1: 0 1px 2px rgba(20, 16, 16, .06), 0 0 0 1px rgba(20, 16, 16, .02);
  --shadow-e2: 0 8px 24px -8px rgba(20, 16, 16, .12);
  --shadow-e3: 0 24px 48px -16px rgba(255, 45, 45, .25);
  --shadow-press: 0 1px 2px rgba(20, 16, 16, .08);
  --shadow-card-border: 0 0 0 1px var(--border-default);

  /* === Motion ========================================================== */
  --ease-standard:  cubic-bezier(.2, .8, .2, 1);
  --ease-bounce:    cubic-bezier(.34, 1.56, .64, 1);
  --dur-micro:      180ms;
  --dur-sheet:      320ms;
  --dur-screen:     480ms;
}