/*
 * Cal-ITP Digital Services Design Language
 * Design Tokens
 */


/* TYPOGRAPHY */

/* Import webfonts */
/* Space Grotesk: Variable weight, 400–700 */
/* Source Code Pro: 400 only */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400..600;1,400..600&family=Source+Code+Pro&family=Space+Grotesk:wght@400..700&display=swap');

:root {
  /* Fonts */
  --dsdl-heading-font-stack: 'Space Grotesk', system-ui;
  --dsdl-body-font-stack: 'Noto Sans', system-ui;
  --dsdl-monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  /* Size */
  --text-base:    16;
  --text-xxs:     calc(10 / var(--text-base) * 1rem);
  --text-xs:      calc(12 / var(--text-base) * 1rem);
  --text-s:       calc(14 / var(--text-base) * 1rem);
  --text-m:       calc(16 / var(--text-base) * 1rem);
  --text-l:       calc(20 / var(--text-base) * 1rem);
  --text-xl:      calc(24 / var(--text-base) * 1rem);
  --text-xxl:     calc(32 / var(--text-base) * 1rem);
  --text-xxxl:    calc(40 / var(--text-base) * 1rem);
  --text-display: calc(64 / var(--text-base) * 1rem);

  /* Line height */
  --line-height-extra-tight: 1.125;
  --line-height-tight:       1.25;
  --line-height-normal:      1.5;
  --line-height-loose:       1.625;

  /* Colors */
  --dsdl-body-color: var(--dsdl-gray-100);
}


/* COLORS */

:root {
  --dsdl-red-10: #fef5f5;
  --dsdl-red-20: #fbd6d6;
  --dsdl-red-30: #f9b7b7;
  --dsdl-red-40: #f37a7b;
  --dsdl-red-50: #ee4142;
  --dsdl-red-60: #de0e10;
  --dsdl-red-70: #980a0b;
  --dsdl-red-80: #750809;
  --dsdl-red-90: #540506;
  --dsdl-red-100: #300304;
  --dsdl-orange-10: #fff4ef;
  --dsdl-orange-20: #fed6c4;
  --dsdl-orange-30: #fcb89a;
  --dsdl-orange-40: #fa7941;
  --dsdl-orange-50: #e54f0e;
  --dsdl-orange-60: #c3440c;
  --dsdl-orange-70: #852e08;
  --dsdl-orange-80: #662306;
  --dsdl-orange-90: #471804;
  --dsdl-orange-100: #260d02;
  --dsdl-yellow-10: #fff6de;
  --dsdl-yellow-20: #ffda84;
  --dsdl-yellow-30: #febd28;
  --dsdl-yellow-40: #ce9411;
  --dsdl-yellow-50: #a97a0e;
  --dsdl-yellow-60: #90680c;
  --dsdl-yellow-70: #614608;
  --dsdl-yellow-80: #4a3506;
  --dsdl-yellow-90: #332404;
  --dsdl-yellow-100: #1b1402;
  --dsdl-green-10: #f1f7f5;
  --dsdl-green-20: #cde3da;
  --dsdl-green-30: #abd0c0;
  --dsdl-green-40: #6bab90;
  --dsdl-green-50: #3b916c;
  --dsdl-green-60: #1b7e54;
  --dsdl-green-70: #105538;
  --dsdl-green-80: #0c412a;
  --dsdl-green-90: #092c1d;
  --dsdl-green-100: #05170f;
  --dsdl-cyan-10: #dff3fe;
  --dsdl-cyan-20: #bfe4f0;
  --dsdl-cyan-30: #91d1e5;
  --dsdl-cyan-40: #38abd0;
  --dsdl-cyan-50: #258cad;
  --dsdl-cyan-60: #207894;
  --dsdl-cyan-70: #155163;
  --dsdl-cyan-80: #103d4c;
  --dsdl-cyan-90: #0b2b34;
  --dsdl-cyan-100: #06161c;
  --dsdl-blue-10: #f2f8f9;
  --dsdl-blue-20: #cbe2e7;
  --dsdl-blue-30: #82b9c6;
  --dsdl-blue-40: #6ca7b8;
  --dsdl-blue-50: #488aa2;
  --dsdl-blue-60: #307693;
  --dsdl-blue-70: #045b86;
  --dsdl-blue-80: #044869;
  --dsdl-blue-90: #022a3d;
  --dsdl-blue-100: #011621;
  --dsdl-purple-10: #f7f7fa;
  --dsdl-purple-20: #deddea;
  --dsdl-purple-30: #c7c5db;
  --dsdl-purple-40: #9e9ac2;
  --dsdl-purple-50: #817caf;
  --dsdl-purple-60: #6d68a3;
  --dsdl-purple-70: #47418b;
  --dsdl-purple-80: #332d7e;
  --dsdl-purple-90: #211b61;
  --dsdl-purple-100: #120f33;
  --dsdl-indigo-10: #f7f7ff;
  --dsdl-indigo-20: #dddbff;
  --dsdl-indigo-30: #c4c1ff;
  --dsdl-indigo-40: #9792ff;
  --dsdl-indigo-50: #756fff;
  --dsdl-indigo-60: #645ddf;
  --dsdl-indigo-70: #433f96;
  --dsdl-indigo-80: #333072;
  --dsdl-indigo-90: #23214f;
  --dsdl-indigo-100: #13112a;
  --dsdl-pink-10: #fcf4f8;
  --dsdl-pink-20: #f3d7e5;
  --dsdl-pink-30: #ebb9d2;
  --dsdl-pink-40: #db83b0;
  --dsdl-pink-50: #ce5894;
  --dsdl-pink-60: #c4367e;
  --dsdl-pink-70: #901052;
  --dsdl-pink-80: #6f0c3f;
  --dsdl-pink-90: #4e082c;
  --dsdl-pink-100: #2c0519;
  --dsdl-gray-10: #f7f7f7;
  --dsdl-gray-20: #dedede;
  --dsdl-gray-30: #c7c7c7;
  --dsdl-gray-40: #9e9e9e;
  --dsdl-gray-50: #828282;
  --dsdl-gray-60: #6e6e6e;
  --dsdl-gray-70: #4a4a4a;
  --dsdl-gray-80: #383838;
  --dsdl-gray-90: #262626;
  --dsdl-gray-100: #141414;
  --dsdl-slate-10: #edf0f4;
  --dsdl-slate-20: #dadee1;
  --dsdl-slate-30: #c1c8cc;
  --dsdl-slate-40: #94a0a8;
  --dsdl-slate-50: #75848e;
  --dsdl-slate-60: #62717b;
  --dsdl-slate-70: #424c53;
  --dsdl-slate-80: #313a3e;
  --dsdl-slate-90: #22272b;
  --dsdl-slate-100: #121416;
  

  --calitp-brand-blue:   var(--dsdl-blue-70);    /* #045b86 */
  --calitp-brand-cyan:   var(--dsdl-cyan-40);    /* #38abd0 */
  --calitp-brand-yellow: var(--dsdl-yellow-30);  /* #febd28 */

  --dsdl-black:          var(--dsdl-slate-100);  /* #121416 */
}


/* SPACING */

:root {
  --spacing-base: calc(8 / var(--text-base) * 1rem);  /* 8px → 0.5rem */
  --spacing-05:   calc(var(--spacing-base) * 0.5);  /* 0.25rem (4px)   */
  --spacing-1:    calc(var(--spacing-base) * 1  );  /* 0.5rem  (8px)   */
  --spacing-2:    calc(var(--spacing-base) * 2  );  /* 1rem    (16px)  */
  --spacing-2-05: calc(var(--spacing-base) * 2.5);  /* 1.25rem (20px)  */
  --spacing-3:    calc(var(--spacing-base) * 3  );  /* 1.5rem  (24px)  */
  --spacing-4:    calc(var(--spacing-base) * 4  );  /* 2rem    (32px)  */
  --spacing-5:    calc(var(--spacing-base) * 5  );  /* 2.5rem  (40px)  */
  --spacing-6:    calc(var(--spacing-base) * 6  );  /* 3rem    (48px)  */
  --spacing-7:    calc(var(--spacing-base) * 7  );  /* 3.5rem  (56px)  */
  --spacing-8:    calc(var(--spacing-base) * 8  );  /* 4rem    (64px)  */
  --spacing-9:    calc(var(--spacing-base) * 9  );  /* 4.5rem  (72px)  */
  --spacing-10:   calc(var(--spacing-base) * 10 );  /* 5rem    (80px)  */
  --spacing-15:   calc(var(--spacing-base) * 15 );  /* 7.5rem  (120px) */
  --spacing-20:   calc(var(--spacing-base) * 20 );  /* 10rem   (160px) */
}