/* =========================================================================
   Peen Design System — colors_and_type.css
   Source of truth: peen/Utils/DesignSystem.swift (SwiftUI)
   ========================================================================= */

/* ---- Fonts ---- */
@font-face {
  font-family: "Google Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GoogleSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Google Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/GoogleSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Google Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GoogleSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Google Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GoogleSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Google Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/GoogleSans-Bold.ttf") format("truetype");
}

:root {
  /* ---- Brand palette (fixed; from AppColors.Brand) ---- */
  --peen-orange:   #D55A1F;  /* Safety / Alert / Energy — primary tint */
  --peen-blue:     #2860A3;  /* Trust / Navigation */
  --peen-green:    #459B51;  /* Nature / Exploration */
  --peen-charcoal: #1F1F20;  /* Rock / Stability */
  --peen-white:    #FFFFFF;  /* Clarity / Simplicity */

  /* Send-type accents (from ClimbLogCard.swift) */
  --peen-flash:    #FFD700;  /* Flash — gold */
  --peen-purple:   #9B59B6;  /* Dog/Hanging */

  /* Login scene wash */
  --peen-paper:    #FCFBFE;  /* near-white background wash */

  /* ---- Semantic colors (light, mapped to iOS system defaults) ---- */
  --fg-1:          #000000;  /* textPrimary  — .label */
  --fg-2:          #3C3C4399; /* textSecondary — .secondaryLabel (60%) */
  --fg-3:          #3C3C434D; /* textTertiary — .tertiaryLabel (30%) */

  --bg:            #FFFFFF;  /* background — app canvas */
  --surface:       #FAF7F4;  /* surface — warm paper, sits on white */
  --surface-elev:  #FFFFFF;  /* surfaceElevated — pure white card on warm surface */
  --field-fill:    #F7F4F0;  /* fieldFill — warm neutral input */
  --card-fill:     #FFFFFF;  /* cardFill — white card on white app bg */

  --separator:     #1F1F2014; /* hairline (charcoal @ 8%) */

  --tint:          var(--peen-orange);    /* AccentColor */
  --navigation:    var(--peen-blue);
  --exploration:   var(--peen-green);

  /* Feedback (iOS system) */
  --success:       #34C759;
  --warning:       #FF9500;
  --danger:        #FF3B30;

  /* ---- Spacing (AppSpacing) ---- */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-xxxl:40px;

  /* ---- Radius (AppRadius) ---- */
  --radius-xxs: 4px;
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px;
  --border-focus:    2px;

  /* ---- Hit targets ---- */
  --hit-target: 44px;

  /* ---- Shadows (derived from login scene + Apple HIG) ---- */
  --shadow-card:   0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-button: 0 10px 14px rgba(0,0,0,0.14);   /* PressScale Apple button */
  --shadow-rock:   0 10px 18px rgba(0,0,0,0.18);   /* hero rock blobs */

  /* ---- Type families ---- */
  --font-sans: "Google Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  /* ---- Type scale (AppFonts; iOS Dynamic Type sizes) ---- */
  --fs-largeTitle:  34px;  --lh-largeTitle: 41px;  --fw-largeTitle: 700;
  --fs-title:       28px;  --lh-title:      34px;  --fw-title:      700;
  --fs-title2:      22px;  --lh-title2:     28px;  --fw-title2:     700;
  --fs-title3:      20px;  --lh-title3:     25px;  --fw-title3:     700;
  --fs-headline:    17px;  --lh-headline:   22px;  --fw-headline:   700;
  --fs-body:        17px;  --lh-body:       22px;  --fw-body:       400;
  --fs-callout:     16px;  --lh-callout:    21px;  --fw-callout:    400;
  --fs-subheadline: 15px;  --lh-subheadline:20px;  --fw-subheadline:400;
  --fs-footnote:    13px;  --lh-footnote:   18px;  --fw-footnote:   400;
  --fs-caption:     12px;  --lh-caption:    16px;  --fw-caption:    400;
  --fs-caption2:    11px;  --lh-caption2:   13px;  --fw-caption2:   400;

  /* Login hero (LoginSceneConstants) */
  --fs-hero:        32px;  --ls-hero: -1px;
  --fs-wordmark:    13px;  --ls-wordmark: 3px;
}

/* ---- Semantic element styles ---- */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings map to iOS title scale */
h1, .h1 { font-size: var(--fs-largeTitle); line-height: var(--lh-largeTitle); font-weight: var(--fw-largeTitle); letter-spacing: -0.5px; }
h2, .h2 { font-size: var(--fs-title);      line-height: var(--lh-title);      font-weight: var(--fw-title); }
h3, .h3 { font-size: var(--fs-title2);     line-height: var(--lh-title2);     font-weight: var(--fw-title2); }
h4, .h4 { font-size: var(--fs-title3);     line-height: var(--lh-title3);     font-weight: var(--fw-title3); }
h5, .headline { font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--fw-headline); }
h6, .subheadline { font-size: var(--fs-subheadline); line-height: var(--lh-subheadline); font-weight: 600; }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); }
.callout    { font-size: var(--fs-callout);    line-height: var(--lh-callout); }
.footnote   { font-size: var(--fs-footnote);   line-height: var(--lh-footnote);   color: var(--fg-2); }
.caption    { font-size: var(--fs-caption);    line-height: var(--lh-caption);    color: var(--fg-2); }
.caption2   { font-size: var(--fs-caption2);   line-height: var(--lh-caption2);   color: var(--fg-2); }

/* Wordmark / brand eyebrow */
.wordmark {
  font-size: var(--fs-wordmark);
  font-weight: 700;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--tint);
}

/* Display headline (login hero) */
.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-hero);
}

/* Card primitive */
.card {
  background: var(--card-fill);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

/* Pill / capsule */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption2);
  font-weight: 700;
}