/* SAN BADA — Apple gallery grammar (DESIGN-apple.md) */

/*
  SF Pro is Apple system type — not shippable as a webfont.
  local() + -apple-system resolve to San Francisco on Apple OS.
  Korean on Apple uses Apple SD Gothic Neo via the same system stack.
*/
@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 300;
  src: local("SF Pro Display Light"), local("SFProDisplay-Light"), local(".SF NS Display");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 400;
  src: local("SF Pro Display Regular"), local("SFProDisplay-Regular"), local(".SF NS Display");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 500;
  src: local("SF Pro Display Medium"), local("SFProDisplay-Medium"), local(".SF NS Display");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 600;
  src: local("SF Pro Display Semibold"), local("SFProDisplay-Semibold"), local(".SF NS Display");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 700;
  src: local("SF Pro Display Bold"), local("SFProDisplay-Bold"), local(".SF NS Display");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  font-style: normal;
  font-weight: 300;
  src: local("SF Pro Text Light"), local("SFProText-Light"), local(".SF NS Text");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  font-style: normal;
  font-weight: 400;
  src: local("SF Pro Text Regular"), local("SFProText-Regular"), local(".SF NS Text");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  font-style: normal;
  font-weight: 500;
  src: local("SF Pro Text Medium"), local("SFProText-Medium"), local(".SF NS Text");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  font-style: normal;
  font-weight: 600;
  src: local("SF Pro Text Semibold"), local("SFProText-Semibold"), local(".SF NS Text");
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  font-style: normal;
  font-weight: 700;
  src: local("SF Pro Text Bold"), local("SFProText-Bold"), local(".SF NS Text");
  font-display: swap;
}

:root {
  /* Brand & accent — official SAN BADA sky #76B7FB */
  --color-primary: #76b7fb;
  --color-primary-focus: #4a94e8;
  --color-primary-on-dark: #b3d9ff;
  --color-accent-moss: #9cc9f7;

  /* Text — navy ink, same hue family as primary */
  --color-ink: #162a43;
  --color-body: #162a43;
  --color-body-on-dark: #f4f8fc;
  --color-body-muted: #b3d9ff;
  --color-ink-muted-80: #3d536b;
  --color-ink-muted-48: #6b8299;

  /* Surfaces — ice → mist → sky → navy */
  --color-divider-soft: #d4e6f6;
  --color-hairline: #b3d9ff;
  --color-canvas: #f4f8fc;
  --color-canvas-parchment: #e8f2fa;
  --color-surface-pearl: #d4e6f6;
  --color-surface-sage: #7aa8d4;
  --color-surface-tile-1: #27486a;
  --color-surface-tile-2: #1d3a54;
  --color-surface-tile-3: #162a43;
  --color-surface-black: #162a43;
  --color-surface-chip: #d4e6f6;
  --color-on-primary: #ffffff;
  --color-on-dark: #f4f8fc;

  /* Page base */
  --bg: #ffffff;

  /* Legacy aliases (existing components) */
  --warm-ivory: var(--color-canvas-parchment);
  --mist: var(--color-surface-pearl);
  --olive: var(--color-surface-sage);
  --sage: var(--color-ink-muted-48);
  --green-100: var(--color-canvas);
  --green-200: var(--color-canvas-parchment);
  --green-300: var(--color-surface-pearl);
  --green-400: var(--color-primary-on-dark);
  --green-500: var(--color-surface-sage);
  --green-700: var(--color-primary);
  --bridge-soft: var(--color-divider-soft);
  --bridge-warm: var(--color-canvas);

  --text: var(--color-ink);
  --text-body: var(--color-ink-muted-80);
  --text-muted: var(--color-ink-muted-48);
  --text-accent: var(--color-primary);
  --hairline: color-mix(in srgb, var(--color-hairline) 32%, transparent);

  /* Apple-only stacks — no Inter / Noto / Roboto */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Helvetica Neue", sans-serif;
  --font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Helvetica Neue", sans-serif;

  /* Type scale — DESIGN-apple.md +1 step (nav-link excluded) */
  --type-hero-display: 64px;
  --type-display-lg: 56px;
  --type-display-md: 40px;
  --type-lead: 34px;
  --type-lead-airy: 28px;
  --type-tagline: 24px;
  --type-body-strong: 21px;
  --type-body: 21px;
  --type-dense-link: 21px;
  --type-caption: 17px;
  --type-caption-strong: 17px;
  --type-button-large: 21px;
  --type-button-utility: 17px;
  --type-fine-print: 14px;
  --type-micro-legal: 12px;
  /* Top menu bar stays at MD nav-link */
  --type-nav-link: 12px;

  /* Legacy aliases used across profile.css / canvas */
  --type-display: var(--type-display-lg);
  --type-heading: var(--type-tagline);
  --type-ui: var(--type-button-utility);

  --leading-hero-display: 1.07;
  --leading-display-lg: 1.1;
  --leading-display-md: 1.47;
  --leading-lead: 1.14;
  --leading-lead-airy: 1.5;
  --leading-tagline: 1.19;
  --leading-body-strong: 1.24;
  --leading-body: 1.47;
  --leading-dense-link: 2.41;
  --leading-caption: 1.43;
  --leading-caption-strong: 1.29;
  --leading-button-large: 1;
  --leading-button-utility: 1.29;
  --leading-fine-print: 1;
  --leading-micro-legal: 1.3;
  --leading-nav-link: 1;

  --leading-display: var(--leading-display-lg);
  --leading-heading: var(--leading-tagline);
  --leading-ui: var(--leading-button-utility);

  --tracking-hero-display: -0.28px;
  --tracking-display-lg: 0;
  --tracking-display-md: -0.374px;
  --tracking-lead: 0.196px;
  --tracking-lead-airy: 0;
  --tracking-tagline: 0.231px;
  --tracking-body-strong: -0.374px;
  --tracking-body: -0.374px;
  --tracking-dense-link: 0;
  --tracking-caption: -0.224px;
  --tracking-caption-strong: -0.224px;
  --tracking-button-large: 0;
  --tracking-button-utility: -0.224px;
  --tracking-fine-print: -0.12px;
  --tracking-micro-legal: -0.08px;
  --tracking-nav-link: -0.12px;

  --tracking-display: var(--tracking-display-lg);
  --tracking-heading: var(--tracking-tagline);
  --tracking-ui: var(--tracking-button-utility);

  /* Weight tokens */
  --weight-display: 600;
  --weight-body: 400;
  --weight-strong: 600;
  --weight-light: 300;

  /* Radius */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* Spacing */
  --spacing-section: 80px;
  --spacing-xxl: 48px;
  --spacing-xl: 32px;
  --spacing-lg: 24px;

  /* Elevation — product imagery only */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  /* Motion */
  --ease-press: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero display responsive ladder — MD ladder +1 step */
@media (max-width: 1068px) {
  :root {
    --type-hero-display: 56px;
  }
}

@media (max-width: 640px) {
  :root {
    --type-hero-display: 40px;
  }
}

@media (max-width: 419px) {
  :root {
    --type-hero-display: 34px;
  }
}