/* THE PERSON Design System — global tokens + brand fonts
   Single source of truth for font-face declarations. Reference from any HTML:
     <link rel="stylesheet" href="/colors_and_type.css">
   ----------------------------------------------------------------------- */

/* ---- Brand font faces -------------------------------------------------- */

@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/fonts/Gotham-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "UDShinGo";
  src: url("/fonts/UDShinGo-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UDShinGo";
  src: url("/fonts/UDShinGo-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UDShinGo";
  src: url("/fonts/UDShinGo-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UDShinGo";
  src: url("/fonts/UDShinGo-DeBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UDShinGo";
  src: url("/fonts/UDShinGo-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UDShinGo";
  src: url("/fonts/UDShinGo-Heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NotoSansJP";
  src: url("/fonts/NotoSansJP.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Color tokens ------------------------------------------------------ */
:root {
  --tp-off-white: #FFFFFB;
  --tp-near-black: #1C1C1C;
  --tp-orange: #E2792E;
  --tp-orange-20: #FBE7D6;
  --tp-orange-dark: #8F3C00;
  --tp-grey-700: #595858;
  --tp-grey-400: #B4B5B4;
  --tp-grey-300: #CBCBCA;
  --tp-grey-200: #EBEBEB;
  --tp-success: #5CC26F;
  --tp-line-green: #00CB42;
  --tp-error: #DE4E4E;

  --tp-font-en: "Gotham", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tp-font-jp: "UDShinGo", "NotoSansJP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --tp-font-mix: "Gotham", "UDShinGo", "NotoSansJP", system-ui, sans-serif;

  --tp-radius-input: 4px;
  --tp-radius-card: 6px;
  --tp-radius-line: 12px;
  --tp-radius-pill: 100px;

  --tp-dur-base: 220ms;
  --tp-ease-standard: cubic-bezier(.2,.6,.2,1);
}