/**
 * SSRN Design Tokens
 * Design system colors, typography, spacing, and more
 * Extracted from Figma design system
 */

:root {
   /* ============================================
     BRAND COLORS - SEA GREEN
     ============================================ */
   --sea-green-10: #0c231f;
   --sea-green-20: #153431;
   --sea-green-30: #1e4643;
   --sea-green-40: #275756;
   --sea-green-50: #306968;
   /* Main brand color */
   --sea-green-60: #568483;
   --sea-green-70: #7ea09f;
   --sea-green-80: #a4bbba;
   --sea-green-90: #ccd7d7;
   --sea-green-100: #ebf0f0;

   /* ============================================
     BRAND COLORS - GOLDEN
     ============================================ */
   --golden-10: #282e22;
   --golden-20: #4f4a37;
   --golden-30: #74674c;
   --golden-40: #9b8262;
   --golden-50: #c09f77;
   /* Main brand color */
   --golden-60: #caaf8f;
   --golden-70: #d4c1a8;
   --golden-80: #ded1c0;
   --golden-90: #e8e2da;
   --golden-100: #f9f6f2;

   /* ============================================
     SEMANTIC COLORS - RED
     ============================================ */
   --red-10: #2b1c1c;
   --red-20: #54262d;
   --red-30: #7b303c;
   --red-40: #a43a4d;
   --red-50: #cc455c;
   /* Error/Danger */
   --red-60: #d3677a;
   --red-70: #db8a98;
   --red-80: #e3adb6;
   --red-90: #ebd0d4;
   --red-100: #faedef;

   /* ============================================
     SEMANTIC COLORS - ORANGE
     ============================================ */
   --orange-10: #302c1a;
   --orange-20: #5e4629;
   --orange-30: #8b6037;
   --orange-40: #b97a45;
   --orange-50: #e59553;
   /* Warning */
   --orange-60: #e8a772;
   --orange-70: #ebba93;
   --orange-80: #edcdb2;
   --orange-90: #f0e0d2;
   --orange-100: #fdf5ee;

   /* ============================================
     SEMANTIC COLORS - YELLOW
     ============================================ */
   --yellow-10: #313923;
   --yellow-20: #616039;
   --yellow-30: #8f874f;
   --yellow-40: #bfae65;
   --yellow-50: #edd67b;
   /* Caution */
   --yellow-60: #eedb92;
   --yellow-70: #efe1ab;
   --yellow-80: #f0e7c2;
   --yellow-90: #f1eddb;
   --yellow-100: #fefbf2;

   /* ============================================
     SEMANTIC COLORS - GREEN
     ============================================ */
   --green-10: #1a371a;
   --green-20: #315c29;
   --green-30: #488136;
   --green-40: #60a644;
   --green-50: #76cc52;
   /* Success */
   --green-60: #8fd371;
   --green-70: #a8db92;
   --green-80: #c0e3b2;
   --green-90: #daebd2;
   --green-100: #f2faee;

   /* ============================================
     SEMANTIC COLORS - BLUE
     ============================================ */
   --blue-10: #022838;
   --blue-20: #023e64;
   --blue-30: #01558f;
   --blue-40: #016bbb;
   --blue-50: #0082e5;
   /* Info */
   --blue-60: #3098e8;
   --blue-70: #61afeb;
   --blue-80: #91c5ed;
   --blue-90: #c2dcf0;
   --blue-100: #e6f3fd;

   /* ============================================
     NEUTRAL COLORS - GREYSCALE
     ============================================ */
   --grey-10: #313131;
   --grey-20: #494a4a;
   --grey-30: #616262;
   --grey-40: #929494;
   --grey-50: #c2c5c5;
   --grey-60: #dbdddd;
   --grey-70: #f3f6f6;
   --grey-80: #fdfdfd;
   --grey-90: #feffff;
   --grey-100: #f9fafa;

   /* ============================================
     BASE COLORS
     ============================================ */
   --black: #03110d;
   --white: #fefefe;

   /* ============================================
     SEMANTIC ALIASES
     ============================================ */
   /* Surface */
   --surface-page: var(--white);
   --surface-primary: var(--grey-100);
   --surface-secondary: var(--grey-70);
   --surface-tertiary: var(--grey-60);

   /* Brand */
   --surface-brand-primary: var(--sea-green-50);
   --surface-brand-secondary: var(--golden-50);

   /* Text */
   --text-primary: var(--black);
   --text-secondary: var(--grey-20);
   --text-tertiary: var(--grey-30);
   --text-disabled: var(--grey-40);
   --text-inverse: var(--white);

   /* Brand text */
   --text-brand-primary: var(--sea-green-50);
   --text-brand-secondary: var(--golden-40);

   /* Border */
   --border-primary: var(--black);
   --border-secondary: var(--grey-20);
   --border-tertiary: var(--grey-30);
   --border-default: var(--grey-60);

   /* States */
   --color-error: var(--red-50);
   --color-warning: var(--orange-50);
   --color-success: var(--green-50);
   --color-info: var(--blue-50);

   /* ============================================
     TYPOGRAPHY - FONT FAMILIES
     ============================================ */
   --font-family-heading: 'Manrope';
   --font-family-body: 'Inter';

   /* ============================================
     TYPOGRAPHY - FONT WEIGHTS
     ============================================ */
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;

   /* ============================================
     TYPOGRAPHY - HEADINGS (Desktop)
     Note: Heading font is Manrope
     ============================================ */
   --heading-display-size: 74px;
   --heading-display-line-height: 84px;

   --heading-h1-size: 62px;
   --heading-h1-line-height: 72px;

   --heading-h2-size: 56px;
   --heading-h2-line-height: 64px;

   --heading-h3-size: 48px;
   --heading-h3-line-height: 56px;

   --heading-h4-size: 40px;
   --heading-h4-line-height: 48px;

   --heading-h5-size: 36px;
   --heading-h5-line-height: 44px;

   --heading-h6-size: 32px;
   --heading-h6-line-height: 40px;

   --heading-h7-size: 28px;
   --heading-h7-line-height: 36px;

   --heading-h8-size: 24px;
   --heading-h8-line-height: 32px;

   /* Heading size shortcuts */
   --heading-xl-size: var(--heading-h2-size);
   /* 56px */
   --heading-xl-line-height: var(--heading-h2-line-height);
   /* 64px */
   --heading-lg-size: var(--heading-h3-size);
   /* 48px */
   --heading-lg-line-height: var(--heading-h3-line-height);
   /* 56px */
   --heading-md-size: var(--heading-h5-size);
   /* 36px */
   --heading-md-line-height: var(--heading-h5-line-height);
   /* 44px */
   --heading-sm-size: var(--heading-h7-size);
   /* 28px */
   --heading-sm-line-height: var(--heading-h7-line-height);
   /* 36px */

   /* ============================================
     TYPOGRAPHY - BODY TEXT (Desktop)
     Note: Body font is Inter
     ============================================ */
   --body-lg-size: 20px;
   --body-lg-line-height: 32px;

   --body-md-size: 16px;
   --body-md-line-height: 24px;

   --body-sm-size: 12px;
   --body-sm-line-height: 16px;

   /* ============================================
     TYPOGRAPHY - CAPTIONS & FOOTNOTES
     Note: Captions font is Inter
     ============================================ */
   --caption-size: 10px;
   --caption-line-height: 17px;

   --footnote-size: 14px;
   --footnote-line-height: 16px;

   /* ============================================
     BORDER RADIUS
     ============================================ */
   --radius-xxs: 2px;
   --radius-xs: 4px;
   --radius-s: 8px;
   --radius-m: 12px;
   --radius-l: 20px;
   --radius-xl: 30px;
   --radius-full: 999px;
   /* For circular elements */

   /* ============================================
     BORDER WIDTHS
     ============================================ */
   --border-xs: 0.5px;
   --border-s: 1px;
   --border-m: 2px;
   --border-l: 4px;

   /* ============================================
     EFFECTS - DROP SHADOWS
     ============================================ */
   --shadow-color: rgba(3, 17, 13, 0.1);

   --shadow-xs: 0px 0px 5px -1px var(--shadow-color);
   --shadow-s: 0px 0px 8px -1px var(--shadow-color);
   --shadow-m: 0px 0px 10px -1px var(--shadow-color);
   --shadow-l: 0px 1px 15px -1px var(--shadow-color);
   --shadow-xl: 0px 1px 20px -1px var(--shadow-color);
   --shadow-2xl: 0px 1px 25px -1px var(--shadow-color);

   /* ============================================
     EFFECTS - BLUR
     ============================================ */
   --blur-xs: 0px;
   --blur-s: 2.5px;
   --blur-m: 4px;

   /* ============================================
     EFFECTS - GRADIENTS
     ============================================ */
   --gradient-dark-down: linear-gradient(180deg, #03110d 0%, rgba(3, 17, 13, 0) 100%);
   --gradient-dark-up: linear-gradient(0deg, #03110d 0%, rgba(3, 17, 13, 0) 100%);

   /* ============================================
     SPACING SCALE
     ============================================ */
   --space-100: 4px;
   --space-200: 8px;
   --space-300: 12px;
   --space-400: 16px;
   --space-500: 20px;
   --space-600: 24px;
   --space-800: 32px;
   --space-1000: 40px;
   --space-1200: 48px;
   --space-1600: 64px;
   --space-2000: 80px;
   --space-2400: 96px;
   --space-3000: 120px;

   /* ============================================
     GRID SYSTEM
     ============================================ */
   --grid-margin: 24px;
   --grid-max-width: 1440px;
   --breakpoint-width: 1440px;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY - TABLET
   ============================================ */
@media (max-width: 1024px) {
   :root {
      --heading-display-size: 56px;
      --heading-display-line-height: 64px;

      --heading-h1-size: 56px;
      --heading-h1-line-height: 64px;

      --heading-h2-size: 48px;
      --heading-h2-line-height: 56px;

      --heading-h3-size: 40px;
      --heading-h3-line-height: 48px;

      --heading-h4-size: 36px;
      --heading-h4-line-height: 44px;

      --heading-h5-size: 28px;
      --heading-h5-line-height: 36px;

      --heading-h6-size: 28px;
      --heading-h6-line-height: 36px;

      --heading-h7-size: 24px;
      --heading-h7-line-height: 32px;

      /* Body stays same as desktop on tablet */
      --body-lg-size: 16px;
      --body-lg-line-height: 24px;
   }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY - MOBILE
   ============================================ */
@media (max-width: 768px) {
   :root {
      --heading-display-size: 40px;
      --heading-display-line-height: 48px;

      --heading-h1-size: 40px;
      --heading-h1-line-height: 48px;

      --heading-h2-size: 36px;
      --heading-h2-line-height: 44px;

      --heading-h3-size: 32px;
      --heading-h3-line-height: 40px;

      --heading-h4-size: 28px;
      --heading-h4-line-height: 36px;

      --heading-h5-size: 28px;
      --heading-h5-line-height: 36px;

      --heading-h6-size: 24px;
      --heading-h6-line-height: 32px;

      --heading-h7-size: 20px;
      --heading-h7-line-height: 28px;

      /* Body adjusts on mobile */
      --body-lg-size: 16px;
      --body-lg-line-height: 24px;
   }
}