/*
Theme Name: Svenn
Theme URI: https://wearesvenn.it
Description: Custom theme for Svenn
Author: Hassel
Author URI: https://hassel.it
Template: the-reporter
Version: 1.0.0
Text Domain: svenn
*/


/* ==========================================
   1. Design tokens
========================================== */

:root {

  /* Fonts */
  --font-heading: "Instrument Serif", serif;
  --font-body: "Urbanist", sans-serif;

  /* Neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-10: #fafafa;
  --color-neutral-20: #f6f6f6;
  --color-neutral-30: #ededed;
  --color-neutral-40: #e1e1e1;
  --color-neutral-50: #c6c6c6;
  --color-neutral-60: #b8b8b8;
  --color-neutral-70: #adadad;
  --color-neutral-80: #9f9f9f;
  --color-neutral-90: #919191;
  --color-neutral-100: #838383;
  --color-neutral-200: #767676;
  --color-neutral-300: #686868;
  --color-neutral-400: #5c5c5c;
  --color-neutral-500: #4f4f4f;
  --color-neutral-600: #434343;
  --color-neutral-700: #333333;
  --color-neutral-800: #252525;
  --color-neutral-900: #1a1a1a;

  /* Brand 01 (Teal) */
  --color-brand-01-50: #e7f9f8;
  --color-brand-01-100: #b5edeb;
  --color-brand-01-200: #91e4e1;
  --color-brand-01-300: #5fd7d3;
  --color-brand-01-400: #40d0ca;
  --color-brand-01-500: #10c4bd;
  --color-brand-01-600: #0fb2ac;
  --color-brand-01-700: #0b8b86;
  --color-brand-01-800: #096c68;
  --color-brand-01-900: #07524f;

  /* Brand 02 (Purple) */
  --color-brand-02-50: #f0edff;
  --color-brand-02-100: #d1c8ff;
  --color-brand-02-200: #bbaeff;
  --color-brand-02-300: #9c89fe;
  --color-brand-02-400: #8972fe;
  --color-brand-02-500: #6b4ffe;
  --color-brand-02-600: #6148e7;
  --color-brand-02-700: #4c38b4;
  --color-brand-02-800: #3b2b8c;
  --color-brand-02-900: #2d216b;

  /* Brand 03 (Warm Gray) */
  --color-brand-03-50: #fdfdfc;
  --color-brand-03-100: #f9f8f4;
  --color-brand-03-200: #f6f4ef;
  --color-brand-03-300: #f2f0e8;
  --color-brand-03-400: #f0ede4;
  --color-brand-03-500: #ece8dd;
  --color-brand-03-600: #d7d3c9;
  --color-brand-03-700: #a8a59d;
  --color-brand-03-800: #82807a;
  --color-brand-03-900: #63615d;

  /* Red */
  --color-red-50: #fee6e6;
  --color-red-100: #fab0b0;
  --color-red-200: #f88a8a;
  --color-red-300: #f55454;
  --color-red-400: #f33333;
  --color-red-500: #f00000;
  --color-red-600: #da0000;
  --color-red-700: #aa0000;
  --color-red-800: #840000;
  --color-red-900: #650000;

  /* Orange */
  --color-orange-50: #fef6ea;
  --color-orange-100: #fbe3be;
  --color-orange-200: #f9d69f;
  --color-orange-300: #f6c373;
  --color-orange-400: #f5b858;
  --color-orange-500: #f2a62e;
  --color-orange-600: #dc972a;
  --color-orange-700: #ac7621;
  --color-orange-800: #855b19;
  --color-orange-900: #664613;

  /* Yellow */
  --color-yellow-50: #ebf516;
  --color-yellow-100: #ebf516;
  --color-yellow-200: #f6fa94;
  --color-yellow-300: #f2f863;
  --color-yellow-400: #eff745;
  --color-yellow-500: #ebf516;
  --color-yellow-600: #d6df14;
  --color-yellow-700: #a7ae10;
  --color-yellow-800: #81870c;
  --color-yellow-900: #636709;

  /* Green */
  --color-green-50: #e6feed;
  --color-green-100: #b0fac6;
  --color-green-200: #8af8ab;
  --color-green-300: #54f584;
  --color-green-400: #33f36d;
  --color-green-500: #00f048;
  --color-green-600: #00da42;
  --color-green-700: #00aa33;
  --color-green-800: #008428;
  --color-green-900: #00651e;

  /* Blue */
  --color-blue-50: #e6edfe;
  --color-blue-100: #b0c6fa;
  --color-blue-200: #8aabf8;
  --color-blue-300: #5484f5;
  --color-blue-400: #336df3;
  --color-blue-500: #0048f0;
  --color-blue-600: #0042da;
  --color-blue-700: #0033aa;
  --color-blue-800: #002884;
  --color-blue-900: #001e65;

  /* Turquoise */
  --color-turquoise-50: #e6fefb;
  --color-turquoise-100: #b0faf2;
  --color-turquoise-200: #8af8eb;
  --color-turquoise-300: #54f5e2;
  --color-turquoise-400: #33f3dd;
  --color-turquoise-500: #00f0d4;
  --color-turquoise-600: #00dac1;
  --color-turquoise-700: #00aa97;
  --color-turquoise-800: #008475;
  --color-turquoise-900: #006559;

  /* Violet */
  --color-violet-50: #fee6fd;
  --color-violet-100: #fab0f8;
  --color-violet-200: #f88af4;
  --color-violet-300: #f554f0;
  --color-violet-400: #f333ed;
  --color-violet-500: #f000e8;
  --color-violet-600: #da00d3;
  --color-violet-700: #aa00a5;
  --color-violet-800: #840080;
  --color-violet-900: #650061;

  /* Purple */
  --color-purple-50: #efe6fd;
  --color-purple-100: #ceb0fa;
  --color-purple-200: #b78af7;
  --color-purple-300: #9654f4;
  --color-purple-400: #8133f1;
  --color-purple-500: #6200ee;
  --color-purple-600: #5900d9;
  --color-purple-700: #4600a9;
  --color-purple-800: #360083;
  --color-purple-900: #290064;

  /* Shades */
  --shade-transparent: #ffffff00;
  --shade-dark-20: #1c1c1c33;
  --shade-dark-50: #1c1c1c7f;
  --shade-dark-80: #1c1c1ccc;

  --shade-light-20: #fafafa33;
  --shade-light-50: #fafafa7f;
  --shade-light-80: #fafafacc;

  --shade-brand-03-20: #ece8dd33;
  --shade-brand-03-50: #ece8dd7f;
  --shade-brand-03-80: #ece8ddcc;

  /* Status */
  --color-status-pink: #ec4899;
  --color-status-gray: #9ca3af;
  --color-status-brown: #92400e;
  --color-status-light: #f3f4f6;
  --color-status-green: #22c55e;
  --color-status-orange: #f97316;
  --color-status-blue: #3b82f6;
  --color-status-purple: #8b5cf6;
  --color-status-red: #ef4444;
  --color-status-yellow: #eab308;
  --color-status-dark: #1f2937;
  --color-status-light-dark: #6b7280;

  --color-status-brand-primary: #2563eb;
  --color-status-brand-secondary: #64748b;

  --page-top-gap: var(--cmsmasters-main-content-padding-top);
}

/* ==========================================
   2. Base typography
========================================== */

body {
  font-family: var(--font-body);
  color: var(--color-neutral-600);	
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-neutral-800);
  font-weight: 400;
}

/* ==========================================
   3. Global utility classes
========================================== */

.text-heading {
  font-family: var(--font-heading);
  color: var(--color-neutral-800);
  font-weight: 400;
}

.text-body {
  font-family: var(--font-body);
  color: var(--color-neutral-600);
  font-weight: 400;
}

.full-width {
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    position: relative;
    left: 50%;
    right: 50%;
}

.no-top-gap {
    margin-top: calc(-1.1 * var(--page-top-gap)) !important;
    padding-top: 0 !important;
}

/* ==========================================
   4. Components
========================================== */

/* Buttons */
/* Cards */
/* Header */
/* Footer */