/* PrimeHouse Design System - Bundled CSS tokens */

/* ---- Webfonts ---- */
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/GeneralSans-Regular.woff2") format("woff2"),
       url("/fonts/GeneralSans-Regular.woff") format("woff");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/GeneralSans-Medium.woff2") format("woff2"),
       url("/fonts/GeneralSans-Medium.woff") format("woff");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/GeneralSans-Semibold.woff2") format("woff2"),
       url("/fonts/GeneralSans-Semibold.woff") format("woff");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/GeneralSans-Bold.woff2") format("woff2"),
       url("/fonts/GeneralSans-Bold.woff") format("woff");
}

/* ---- Color tokens ---- */
:root {
  --ink:            #1C1B1F;
  --ink-secondary:  #46464A;
  --ink-muted:      #595959;
  --ink-disabled:   #8C8C8E;
  --ink-onfill:     #FFFFFF;

  --white:          #FFFFFF;
  --paper:          #FFFFFF;
  --surface:        #FFFFFF;
  --surface-soft:   #F4F4F4;
  --surface-muted:  #E9E9EA;
  --surface-ink:    #1C1B1F;
  --surface-ink-2:  #26252A;

  --border-subtle:  #E6E6E7;
  --border:         #D2D2D4;
  --border-strong:  #B0B0B3;
  --border-onink:   rgba(255,255,255,0.18);

  --sand-50:        #F8F1E8;
  --sand-100:       #EDDBC7;
  --sand-200:       #E2CDB8;
  --sand-300:       #D8BFA9;
  --sand-400:       #CDB19B;
  --sand-500:       #C3A38C;
  --gold:           #A99467;
  --bronze:         #7A6647;

  --accent-text:    #5C4A33;
  --accent-text-hover: #463826;

  --success:         #1E8A3C;
  --success-text:    #0B5C27;
  --success-surface: #DAF6E1;
  --success-onfill:  #FFFFFF;

  --error:          #C34345;
  --error-text:     #8E1F22;
  --error-surface:  #FBE4E4;
  --error-onfill:   #FFFFFF;

  --warning:         #E5A100;
  --warning-text:    #6B4E00;
  --warning-surface: #FFF3D6;
  --warning-onfill:  #1C1B1F;

  --info:           #2F6FE0;
  --info-text:      #1A4E8F;
  --info-surface:   #E6F0FF;
  --info-onfill:    #FFFFFF;

  --coin:           #C9A227;
  --coin-text:      #6E5300;
  --coin-surface:   #FBF1CF;

  --scrim:          rgba(20,18,15,0.55);
  --scrim-strong:   rgba(20,18,15,0.72);
  --scrim-grad:     linear-gradient(180deg, rgba(20,18,15,0) 0%, rgba(20,18,15,0.78) 100%);

  --focus-ring:     #1C1B1F;
  --focus-ring-onink: #F8F1E8;

  /* ---- Typography ---- */
  --font-sans:    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-h0:  70px;
  --text-h1:  40px;
  --text-h2:  30px;
  --text-h3:  25px;
  --text-h4:  20px;
  --text-h5:  17px;
  --text-b1:  20px;
  --text-b2:  16px;
  --text-b3:  14px;
  --text-overline: 13px;

  --lh-display: 1.05;
  --lh-tight:   1.12;
  --lh-heading: 1.2;
  --lh-snug:    1.3;
  --lh-body:    1.5;
  --lh-relaxed: 1.6;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-overline: 0.12em;
  --tracking-wordmark: -0.006em;

  /* ---- Spacing ---- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  10px;
  --space-s:   16px;
  --space-m:   20px;
  --space-l:   30px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 100px;

  --container-max: 1520px;
  --container-text: 1120px;
  --container-narrow: 760px;
  --gutter: 40px;
  --gutter-mobile: 20px;

  --control-h-sm: 40px;
  --control-h-md: 48px;
  --control-h-lg: 60px;
  --tap-min: 44px;

  /* ---- Elevation ---- */
  --radius-0:    0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-pill: 999px;
  --radius-full: 50%;

  --bw-hair: 1px;
  --bw-1:    1px;
  --bw-2:    2px;

  --shadow-none: none;
  --shadow-xs:  0 1px 2px rgba(28,27,31,0.06);
  --shadow-sm:  0 2px 8px rgba(28,27,31,0.08);
  --shadow-md:  0 8px 24px rgba(28,27,31,0.10);
  --shadow-lg:  0 16px 48px rgba(28,27,31,0.14);
  --shadow-card-hover: 0 12px 32px rgba(28,27,31,0.12);
  --shadow-pop: 0 12px 40px rgba(28,27,31,0.16);

  --focus-width: 2px;
  --focus-offset: 2px;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}