/* =========================================================================
   Yeseem Design System — Colors & Type
   Inter is the single family across the product.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Brand -------------------------------------------------------------- */
  --ys-indigo:        #333D7B;   /* primary */
  --ys-indigo-600:    #4B5699;   /* lighter indigo for deco / hover */
  --ys-indigo-900:    #1A1E2E;   /* deepest indigo for accents */
  --ys-sand:          #F69B63;   /* warm accent */
  --ys-sand-hover:    #E88A52;
  --ys-mint:          #59BC92;   /* success / positive */
  --ys-mint-hover:    #48A680;
  --ys-red-soft:      #FFD1D1;   /* destructive bg */

  /* --- Brand alphas (for fills, shadows, tiles) --------------------------- */
  --ys-indigo-05:     rgba(51, 61, 123, 0.05);
  --ys-indigo-10:     rgba(51, 61, 123, 0.10);
  --ys-indigo-15:     rgba(51, 61, 123, 0.15);
  --ys-indigo-20:     rgba(51, 61, 123, 0.20);
  --ys-indigo-30:     rgba(51, 61, 123, 0.30);
  --ys-sand-10:       rgba(246, 155, 99, 0.10);
  --ys-sand-40:       rgba(246, 155, 99, 0.40);
  --ys-mint-10:       rgba(89, 188, 146, 0.10);
  --ys-mint-40:       rgba(89, 188, 146, 0.40);
  --ys-mint-50:       rgba(89, 188, 146, 0.50);

  /* --- Neutrals ----------------------------------------------------------- */
  --ys-bg:            #FBFBFB;   /* screen bg inside phone */
  --ys-bg-shell:      #F3F4F6;   /* app shell (outside phone frame) */
  --ys-surface:       #FFFFFF;   /* card */
  --ys-surface-alt:   #F9FAFB;   /* subtle alt surface */
  --ys-hairline:      #E5E4E4;   /* 1px border */
  --ys-hairline-soft: rgba(229, 228, 228, 0.5);

  /* --- Semantic text ------------------------------------------------------ */
  --ys-text:          #333D7B;   /* headings & primary */
  --ys-text-body:     #6B7280;   /* long-form body */
  --ys-text-muted:    #A4ACC7;   /* muted / eyebrow / meta */
  --ys-text-dim:      #9CA3AF;   /* disabled */
  --ys-text-on-dark:  #FFFFFF;
  --ys-text-on-dark-dim: rgba(255, 255, 255, 0.7);

  /* --- Shadows ------------------------------------------------------------ */
  --ys-shadow-card:   0 8px 20px -5px rgba(51, 61, 123, 0.10);
  --ys-shadow-hero:   0 15px 35px -5px rgba(51, 61, 123, 0.15);
  --ys-shadow-btn:    0 4px 6px -4px rgba(51, 61, 123, 0.30), 0 10px 15px -3px rgba(51, 61, 123, 0.30);
  --ys-shadow-pill:   0 10px 15px -3px rgba(51, 61, 123, 0.20), 0 4px 6px -4px rgba(51, 61, 123, 0.20);
  --ys-shadow-sand:   0 8px 10px -6px rgba(246, 155, 99, 0.40);
  --ys-shadow-mint:   0 8px 10px -6px rgba(89, 188, 146, 0.40);
  --ys-shadow-frame:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --ys-shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.05);

  /* --- Radius ------------------------------------------------------------- */
  --ys-r-xs: 6px;
  --ys-r-sm: 8px;
  --ys-r-md: 12px;
  --ys-r-lg: 16px;
  --ys-r-xl: 24px;
  --ys-r-2xl: 32px;
  --ys-r-frame: 40px;
  --ys-r-pill: 9999px;

  /* --- Spacing (4px base) ------------------------------------------------- */
  --ys-s-1: 4px;
  --ys-s-2: 8px;
  --ys-s-3: 12px;
  --ys-s-4: 16px;
  --ys-s-5: 20px;
  --ys-s-6: 24px;
  --ys-s-8: 32px;
  --ys-s-10: 40px;
  --ys-s-12: 48px;
  --ys-s-16: 64px;

  /* --- Type --------------------------------------------------------------- */
  --ys-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* raw type tokens */
  --ys-t-display:  800 30px/36px var(--ys-font);
  --ys-t-h1:       700 26px/32px var(--ys-font);
  --ys-t-h2:       700 20px/26px var(--ys-font);
  --ys-t-h3:       700 16px/22px var(--ys-font);
  --ys-t-h4:       700 12px/16px var(--ys-font);
  --ys-t-body:     400 14px/22px var(--ys-font);
  --ys-t-body-md:  500 14px/22px var(--ys-font);
  --ys-t-small:    400 12px/18px var(--ys-font);
  --ys-t-micro:    400 10px/15px var(--ys-font);
  --ys-t-eyebrow:  700 10px/15px var(--ys-font); /* apply letter-spacing separately */
  --ys-t-button:   700 16px/24px var(--ys-font);

  /* letter-spacing */
  --ys-ls-display: -0.75px;
  --ys-ls-h1:      -0.65px;
  --ys-ls-tight:   -0.25px;
  --ys-ls-eyebrow: 1.4px;
  --ys-ls-button:  0.4px;
}

/* =========================================================================
   Semantic helpers (drop into any element)
   ========================================================================= */
.ys-display { font: var(--ys-t-display); letter-spacing: var(--ys-ls-display); color: var(--ys-text); }
.ys-h1      { font: var(--ys-t-h1); letter-spacing: var(--ys-ls-h1); color: var(--ys-text); }
.ys-h2      { font: var(--ys-t-h2); color: var(--ys-text); }
.ys-h3      { font: var(--ys-t-h3); color: var(--ys-text); }
.ys-h4      { font: var(--ys-t-h4); color: var(--ys-text); }
.ys-body    { font: var(--ys-t-body); color: var(--ys-text-muted); }
.ys-body-dk { font: var(--ys-t-body); color: var(--ys-text-body); }
.ys-small   { font: var(--ys-t-small); color: var(--ys-text-muted); }
.ys-micro   { font: var(--ys-t-micro); color: var(--ys-text-muted); }
.ys-eyebrow { font: var(--ys-t-eyebrow); letter-spacing: var(--ys-ls-eyebrow); color: var(--ys-text-muted); text-transform: uppercase; }
.ys-button  { font: var(--ys-t-button); letter-spacing: var(--ys-ls-button); }

/* Shells / reusable chrome */
.ys-card {
  background: var(--ys-surface);
  border: 1px solid var(--ys-hairline);
  border-radius: var(--ys-r-lg);
  box-shadow: var(--ys-shadow-card);
}
.ys-card-hero {
  background: var(--ys-surface);
  border: 1px solid var(--ys-hairline);
  border-radius: var(--ys-r-2xl);
  box-shadow: var(--ys-shadow-hero);
}
.ys-btn-primary {
  background: var(--ys-indigo);
  color: #fff;
  border-radius: var(--ys-r-lg);
  box-shadow: var(--ys-shadow-btn);
  font: var(--ys-t-button);
  letter-spacing: var(--ys-ls-button);
  height: 56px;
  padding: 0 20px;
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ys-btn-primary:hover { background: #2B3569; }
.ys-btn-primary:active { transform: scale(0.98); }

.ys-btn-accent {
  background: var(--ys-sand);
  color: #fff;
  border-radius: var(--ys-r-lg);
  box-shadow: var(--ys-shadow-sand);
  font: var(--ys-t-button);
  height: 48px;
  padding: 0 20px;
  border: 0;
  cursor: pointer;
}
.ys-btn-accent:hover { background: var(--ys-sand-hover); }

.ys-eyebrow-indigo { color: var(--ys-indigo); font: var(--ys-t-eyebrow); letter-spacing: var(--ys-ls-eyebrow); text-transform: uppercase; }

/* Glass surface (trust cues) */
.ys-glass {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--ys-hairline-soft);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--ys-r-md);
}

/* Icon tiles */
.ys-tile      { border-radius: var(--ys-r-md); display: inline-flex; align-items: center; justify-content: center; }
.ys-tile-sm   { width: 32px; height: 32px; }
.ys-tile-md   { width: 40px; height: 40px; }
.ys-tile-lg   { width: 48px; height: 48px; }
.ys-tile-indigo { background: var(--ys-indigo-05); color: var(--ys-indigo); }
.ys-tile-mint   { background: var(--ys-mint-10);   color: var(--ys-mint); }
.ys-tile-sand   { background: var(--ys-sand-10);   color: var(--ys-sand); }

html, body { font-family: var(--ys-font); color: var(--ys-text); -webkit-font-smoothing: antialiased; }