/* =========================================================
   Dermis Design System — Tokens
   Source: Dermis-mobile (joe-leek/Dermis-mobile@main)
   src/constants/Colors.ts, Shadows.ts, CButton, CTextInput
   ========================================================= */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/HankenGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* ----- Brand (from Colors.ts) ----- */
  --brand: #E91F64;           /* deepPink — the single primary */
  --brand-pressed: #d11b5a;   /* buttonPink — pressed state */
  --brand-soft: #FAD2E0;      /* lightPink */
  --brand-wash: #FEE5F0;      /* shadowPink */

  /* ----- Ink (text + UI) ----- */
  --ink:       #262C40;  /* black — primary text, the navy-black */
  --ink-2:     #383A42;  /* black2 */
  --ink-deep:  #01080a;  /* primaryBlack — buttons/backgrounds */
  --ink-1:     #202020;  /* black1 */

  /* ----- Greys — tightened to 6 steps from the repo's 16 ----- */
  --grey-50:  #FBFBFB;   /* grey15 — page wash */
  --grey-100: #F7F8F8;   /* primaryWhite — canvas */
  --grey-200: #EDEEF1;   /* grey1 — dividers, input borders */
  --grey-300: #D9D9D9;   /* grey12 — disabled edge */
  --grey-400: #B5BAC4;   /* grey3 — placeholder, disabled bg */
  --grey-500: #8D94A3;   /* grey4 — tertiary text */
  --grey-600: #6F7788;   /* grey5 — secondary text */
  --grey-700: #525866;   /* grey8 — body text on light */
  --grey-800: #414E6E;   /* grey7 — strong labels */
  --grey-900: #262C40;   /* == ink */

  /* ----- Surface ----- */
  --surface:        #FFFFFF;
  --surface-muted:  #F2F7FB;  /* grey6 — muted footer cards */
  --surface-sunken: #F7F8F8;  /* primaryWhite */

  /* ----- Semantic ----- */
  --success:       #228200;  /* green */
  --success-wash:  #E7FFDE;  /* lightGreen */
  --danger:        #FF0000;  /* deepRed */
  --danger-2:      #CA0C47;  /* red2 */
  --danger-wash:   #FF999C;  /* lightRed */
  --info:          #3B62DD;  /* blue */
  --info-wash:     #E8ECF7;  /* lightBlue */

  /* ----- Type ----- */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Size scale — straight from CText.tsx */
  --fs-xxxs: 10px;
  --fs-xxs:  11px;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-xsl:  24px;
  --fs-xxl:  25px;
  --fs-big:  28px;
  --fs-xxxl: 30px;
  --fs-xxxxll:45px;
  --fs-xxxxl:60px;

  /* ----- Spacing (4-step from CButton/CTextInput padding values) ----- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;  /* card padding, input padding-h */
  --sp-5:  18px;  /* input padding-v */
  --sp-6:  24px;  /* card padding-lg, section gap */
  --sp-7:  32px;
  --sp-8:  40px;

  /* ----- Radii (repo uses 8 / 16 / pill) ----- */
  --r-sm:   8px;   /* small cards, chips */
  --r-md:   16px;  /* primary buttons, inputs, cards */
  --r-lg:   24px;
  --r-pill: 999px;

  /* ----- Shadows — translated from Shadows.ts + card styles ----- */
  --sh-card:   0 2.5px 2.5px rgba(1,8,10,0.12);
  --sh-raised: 0 2px 10px rgba(111,119,136,0.25);
  --sh-small:  0 4px 4.65px rgba(1,8,10,0.20);
  --sh-medium: 0 8px 10.32px rgba(1,8,10,0.28);
  --sh-large:  0 12px 16px rgba(1,8,10,0.40);
  --sh-focus:  0 0 0 3px rgba(233,31,100,0.18);
}

/* ----- Base ----- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--grey-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}