/* Titan design system — foundation tokens */

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ——— White & Black ——— */
  --color-white-900: #FFFFFF;

  --color-black-100: #F7F7F7;
  --color-black-200: #DCDCDC;
  --color-black-300: #C1C1C1;
  --color-black-400: #A6A6A6;
  --color-black-500: #8B8B8B;
  --color-black-600: #707070;
  --color-black-700: #555555;
  --color-black-800: #3A3A3A;
  --color-black-900: #1F1F1F;

  /* ——— Steel ——— */
  --color-steel-100: #E7EAEC;
  --color-steel-200: #CED6D8;
  --color-steel-300: #B6C1C5;
  --color-steel-400: #9EACB2;
  --color-steel-500: #85989E;
  --color-steel-600: #6D838B;
  --color-steel-700: #57696F;
  --color-steel-800: #414F53;
  --color-steel-900: #2C3438;

  /* ——— Blue ——— */
  --color-blue-100: #E9EBF0;
  --color-blue-200: #D3D7E1;
  --color-blue-300: #A6AFC4;
  --color-blue-400: #7A86A6;
  --color-blue-500: #4D5E89;
  --color-blue-600: #21366B;
  --color-blue-700: #1A2B56;
  --color-blue-800: #142040;
  --color-blue-900: #0D162B;

  /* ——— Aquamarine ——— */
  --color-aquamarine-100: #ECF7F6;
  --color-aquamarine-200: #CEE8E5;
  --color-aquamarine-300: #B0D8D4;
  --color-aquamarine-400: #92C9C2;
  --color-aquamarine-500: #74B9B1;
  --color-aquamarine-600: #56AAA0;
  --color-aquamarine-700: #448880;
  --color-aquamarine-800: #336660;
  --color-aquamarine-900: #214440;

  /* ——— Avocado ——— */
  --color-avocado-100: #E8F1ED;
  --color-avocado-200: #C4D8CD;
  --color-avocado-300: #A0BFAE;
  --color-avocado-400: #7BA78E;
  --color-avocado-500: #578E6F;
  --color-avocado-600: #33754F;
  --color-avocado-700: #285E3F;
  --color-avocado-800: #1C462F;
  --color-avocado-900: #112F1F;

  /* ——— Blueberry ——— */
  --color-blueberry-100: #EDEDFB;
  --color-blueberry-200: #CDCDF4;
  --color-blueberry-300: #AEADED;
  --color-blueberry-400: #8E8DE5;
  --color-blueberry-500: #6F6DDE;
  --color-blueberry-600: #4F4DD7;
  --color-blueberry-700: #3F3EAC;
  --color-blueberry-800: #302E81;
  --color-blueberry-900: #201F56;

  /* ——— Ocean ——— */
  --color-ocean-100: #E8F3FE;
  --color-ocean-200: #C5DCFD;
  --color-ocean-300: #A2C5FB;
  --color-ocean-400: #7FAFFA;
  --color-ocean-500: #5C98F8;
  --color-ocean-600: #3981F7;
  --color-ocean-700: #2C67C5;
  --color-ocean-800: #1F4D94;
  --color-ocean-900: #123362;

  /* ——— Orange ——— */
  --color-orange-100: #FCF0E7;
  --color-orange-200: #F9D5C2;
  --color-orange-300: #F6B99C;
  --color-orange-400: #F29E77;
  --color-orange-500: #EF8251;
  --color-orange-600: #EC672C;
  --color-orange-700: #BD5221;
  --color-orange-800: #8D3E17;
  --color-orange-900: #5E290C;

  /* ——— Pomegranate ——— */
  --color-pomegranate-100: #FFDED5;
  --color-pomegranate-200: #FEC1B1;
  --color-pomegranate-300: #FDA48E;
  --color-pomegranate-400: #FB876A;
  --color-pomegranate-500: #F96B47;
  --color-pomegranate-600: #F74F25;
  --color-pomegranate-700: #E3370B;
  --color-pomegranate-800: #B52F0B;
  --color-pomegranate-900: #89250A;

  /* ——— Pink ——— */
  --color-pink-100: #FBE7F3;
  --color-pink-200: #F8C3DF;
  --color-pink-300: #F49FCB;
  --color-pink-400: #F17BB7;
  --color-pink-500: #ED57A3;
  --color-pink-600: #EA338F;
  --color-pink-700: #BB2772;
  --color-pink-800: #8C1A56;
  --color-pink-900: #5D0E39;

  /* ——— Teal ——— */
  --color-teal-100: #F5FFFB;
  --color-teal-200: #D3EFE0;
  --color-teal-300: #B1DFC6;
  --color-teal-400: #90D0AB;
  --color-teal-500: #6EC091;
  --color-teal-600: #4CB076;
  --color-teal-700: #3E9363;
  --color-teal-800: #2F774F;
  --color-teal-900: #215A3C;

  /* ——— Tomato ——— */
  --color-tomato-100: #F8E8EA;
  --color-tomato-200: #EEC3C6;
  --color-tomato-300: #E49EA3;
  --color-tomato-400: #DA797F;
  --color-tomato-500: #D0545C;
  --color-tomato-600: #C62F38;
  --color-tomato-700: #9E252C;
  --color-tomato-800: #761A21;
  --color-tomato-900: #4E1015;

  /* ——— Violet ——— */
  --color-violet-100: #F2EFFE;
  --color-violet-200: #DBD2FC;
  --color-violet-300: #C4B5FB;
  --color-violet-400: #AD97F9;
  --color-violet-500: #967AF8;
  --color-violet-600: #7F5DF6;
  --color-violet-700: #654AC5;
  --color-violet-800: #4C3893;
  --color-violet-900: #322562;

  /* ——— Yellow ——— */
  --color-yellow-100: #FEFAEA;
  --color-yellow-200: #FDF1CA;
  --color-yellow-300: #FBE8AA;
  --color-yellow-400: #FAE08A;
  --color-yellow-500: #F8D76A;
  --color-yellow-600: #F7CE4A;
  --color-yellow-700: #C6A53A;
  --color-yellow-800: #947C2B;
  --color-yellow-900: #63531B;

  /* ——— Mango ——— */
  --color-mango-100: #FDF6E8;
  --color-mango-200: #FAE7C5;
  --color-mango-300: #F7D8A3;
  --color-mango-400: #F3C880;
  --color-mango-500: #F0B95E;
  --color-mango-600: #EDAA3B;
  --color-mango-700: #BE882E;
  --color-mango-800: #8E6520;
  --color-mango-900: #5F4313;

  /* ——— Indigo ——— */
  --color-indigo-100: #EBF5F9;
  --color-indigo-200: #CBE2EF;
  --color-indigo-300: #ABCFE5;
  --color-indigo-400: #8CBDDB;
  --color-indigo-500: #6CAAD1;
  --color-indigo-600: #4C97C7;
  --color-indigo-700: #3C799F;
  --color-indigo-800: #2D5A78;
  --color-indigo-900: #1D3C50;

  /* ——— Semantic: Error → Tomato ——— */
  --color-error-100: var(--color-tomato-100);
  --color-error-200: var(--color-tomato-200);
  --color-error-300: var(--color-tomato-300);
  --color-error-400: var(--color-tomato-400);
  --color-error-500: var(--color-tomato-500);
  --color-error-600: var(--color-tomato-600);
  --color-error-700: var(--color-tomato-700);
  --color-error-800: var(--color-tomato-800);
  --color-error-900: var(--color-tomato-900);

  /* ——— Semantic: Information → Ocean ——— */
  --color-information-100: var(--color-ocean-100);
  --color-information-200: var(--color-ocean-200);
  --color-information-300: var(--color-ocean-300);
  --color-information-400: var(--color-ocean-400);
  --color-information-500: var(--color-ocean-500);
  --color-information-600: var(--color-ocean-600);
  --color-information-700: var(--color-ocean-700);
  --color-information-800: var(--color-ocean-800);
  --color-information-900: var(--color-ocean-900);

  /* ——— Semantic: Success → Teal ——— */
  --color-success-100: var(--color-teal-100);
  --color-success-200: var(--color-teal-200);
  --color-success-300: var(--color-teal-300);
  --color-success-400: var(--color-teal-400);
  --color-success-500: var(--color-teal-500);
  --color-success-600: var(--color-teal-600);
  --color-success-700: var(--color-teal-700);
  --color-success-800: var(--color-teal-800);
  --color-success-900: var(--color-teal-900);

  /* ——— Semantic: Warning → Mango ——— */
  --color-warning-100: var(--color-mango-100);
  --color-warning-200: var(--color-mango-200);
  --color-warning-300: var(--color-mango-300);
  --color-warning-500: var(--color-mango-500);
  --color-warning-600: var(--color-mango-600);
  --color-warning-700: var(--color-mango-700);
  --color-warning-800: var(--color-mango-800);
  --color-warning-900: var(--color-mango-900);

  /* ——— Semantic: Disabled → Black ——— */
  --color-disabled-100: var(--color-black-100);
  --color-disabled-200: var(--color-black-200);
  --color-disabled-300: var(--color-black-300);
  --color-disabled-400: var(--color-black-400);
  --color-disabled-500: var(--color-black-500);
  --color-disabled-600: var(--color-black-600);
  --color-disabled-700: var(--color-black-700);
  --color-disabled-800: var(--color-black-800);
  --color-disabled-900: var(--color-black-900);

  /* ——— Opacity helpers (steel base #6D838B) ——— */
  --color-steel-10: rgba(109, 131, 139, 0.1);
  --color-steel-20: rgba(109, 131, 139, 0.2);
  --color-steel-30: rgba(109, 131, 139, 0.3);
  --color-steel-40: rgba(109, 131, 139, 0.4);

  /* Blue opacity (overlay / backdrop) */
  --color-blue-40: #21366B66;

  /* ——— Spacing ——— */
  --spacing-5xs: 2px;
  --spacing-4xs: 4px;
  --spacing-3xs: 6px;
  --spacing-2xs: 8px;
  --spacing-xs: 10px;
  --spacing-s: 12px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;
  --spacing-6xl: 96px;
  --spacing-7xl: 160px;

  /*
   * Typography — DM Sans at Poppins × 1.25
   * Anchor: text-button was 16px (Poppins) → 20px (DM Sans).
   * Every size/leading token is Poppins × 1.25, rounded to the nearest even px.
   * Display sizes step down on smaller viewports (also even px).
   */

  /* ——— Typography: size ——— */
  /* Poppins: 12/14/16/20/24/32/46 → ×1.25 → 16/18/20/26/30/40/58 */
  --font-size-s: 16px;
  --font-size-m: 18px;
  --font-size-l: 20px;
  --font-size-xl: 26px;
  --font-size-2xl: 30px;
  --font-size-3xl: 40px;
  --font-size-4xl: 58px;

  /* ——— Typography: leading ——— */
  /* Poppins: 16/18/20/22/24/28/36/50 → ×1.25 → 20/22/26/28/30/36/46/62 */
  --font-leading-s: 20px;
  --font-leading-m: 22px;
  --font-leading-l: 26px;
  --font-leading-xl: 28px;
  --font-leading-2xl: 30px;
  --font-leading-3xl: 36px;
  --font-leading-4xl: 46px;
  --font-leading-5xl: 62px;

  /* ——— Typography: tracking ——— */
  --font-tracking-tight: -0.025em;
  --font-tracking-snug: -0.015em;
  --font-tracking-normal: 0;
  --font-tracking-wide: 0.06em;

  /* ——— Typography: weight ——— */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;

  /* ——— Borders: stroke ——— */
  --stroke-s: 1px;
  --stroke-m: 2px;
  --stroke-l: 3px;
  --stroke-xl: 4px;

  /* ——— Borders: rounded ——— */
  --rounded-xs: 4px;
  --rounded-s: 8px;
  --rounded-m: 12px;
  --rounded-l: 16px;
  --rounded-xl: 20px;
  --rounded-full: 9999px;

  /* ——— Elevation (box-shadow) ——— */
  --elevation-0: 0 0 8px var(--color-steel-10);
  --elevation-1: 0 4px 12px var(--color-steel-10);
  --elevation-2: 0 5px 16px var(--color-steel-20);
  --elevation-3: 0 6px 20px var(--color-steel-30);
  --elevation-4: 0 7px 24px var(--color-steel-40);

  --box-shadow-0: var(--elevation-0);
  --box-shadow-1: var(--elevation-1);
  --box-shadow-2: var(--elevation-2);
  --box-shadow-3: var(--elevation-3);
  --box-shadow-4: var(--elevation-4);

  /* ——— Layout ——— */
  --layout-max: 1760px;
  --layout-min: 1120px;
  --layout-padding: 80px;
  --navbar-height: 70px;

  /* ——— Portfolio semantic theme ——— */
  --bg: var(--color-black-100);
  --fg: var(--color-black-900);
  --surface: var(--color-white-900);
  --card: var(--color-white-900);
  --muted: var(--color-black-600);
  --border: var(--color-steel-200);
  --border-light: var(--color-steel-100);
  --border-soft: var(--color-steel-100);
  --surface-subtle: var(--color-steel-100);
  --overlay: rgba(247, 247, 247, 0.86);
  --overlay-color: var(--color-blue-40);
  --background-brand: var(--color-white-900);
  --accent: var(--color-steel-900);
  --font-family: 'DM Sans', system-ui, sans-serif;
  --radius: var(--rounded-l);
  --max: 1120px;
  --page-margin: clamp(24px, 5vw, 80px);
  --header-height: var(--navbar-height);
}

/* Display sizes: even-px steps down so 58/40 stay readable on small screens */
@media (max-width: 768px) {
  :root {
    --font-size-3xl: 30px;
    --font-size-4xl: 40px;
    --font-leading-4xl: 36px;
    --font-leading-5xl: 46px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-3xl: 26px;
    --font-size-4xl: 30px;
    --font-leading-4xl: 30px;
    --font-leading-5xl: 36px;
  }
}