/* ============================================================
   Wilow Design System — Colors & Type
   Sourced from wilow-mobile-app/lib/theme/colors.dart +
   /Design Figma /METADATA.md top-used colors and fonts.
   ============================================================ */

/* --- Fonts (OTF/TTF shipped from mobile app) --------------- */
@font-face {
  font-family: "Mint Grotesk";
  src: url("fonts/Mint-Light.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mint Grotesk";
  src: url("fonts/Mint-Regular.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mint Grotesk";
  src: url("fonts/Mint-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/Noto-Light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/Noto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/Noto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Arabic";
  src: url("fonts/NotoArabic.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DIN Arabic";
  src: url("fonts/Din.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------- Brand Colors ------- */
  --wilow-blue:        #ABD4FD; /* primary — logo badge, headers, buttons */
  --wilow-blue-light:  #D4E6FC; /* big fill for illustrations / containers */
  --wilow-blue-soft:   #DFECFC; /* subtle blue backgrounds */
  --wilow-blue-mid:    #9FC9FC; /* splash / alt primary in figma */
  --wilow-orange:      #FF7132; /* accent — duck feet, CTAs, highlights */
  --wilow-orange-deep: #EF5815; /* press / hover orange */
  --wilow-yellow:      #FFDF70; /* secondary — tags, avatar tiles */
  --wilow-yellow-deep: #FFD132; /* deeper yellow chip / highlight */
  --wilow-green:       #6BA638; /* success — delivered state */
  --wilow-green-dark:  #639334; /* darker green variant */
  --wilow-green-soft:  #BDE377; /* success chip background */
  --wilow-red:         #B50000; /* error / destructive */
  --wilow-indigo:      #3D3D5C; /* deep accent (rare) */

  /* ------- Cream / Off-white surfaces (signature) ------- */
  --cream-0:  #FDFBF9; /* scaffold background — app default bg */
  --cream-1:  #FEF8F6; /* softer off-white section */
  --cream-2:  #F8F4EF; /* card surface */
  --cream-3:  #F3EDE4; /* header gradient top */
  --cream-4:  #F3F0EC; /* subtle divider surface */
  --cream-5:  #F9F5F0; /* muted surface */

  /* ------- Neutrals ------- */
  --ink:        #000000; /* primary text */
  --ink-900:    #111111; /* near-black */
  --ink-800:    #242424; /* bold text */
  --ink-700:    #3F3F3F; /* body */
  --ink-600:    #3A3939; /* b2b black */
  --ink-500:    #686868; /* secondary text / labels */
  --ink-400:    #878787; /* dark gray 50 */
  --ink-300:    #BDB9B2; /* placeholder */
  --ink-250:    #BFBFBF; /* disabled text */
  --ink-200:    #D0CDC8; /* hairline / separator */
  --ink-150:    #D9D9D9; /* border */
  --ink-100:    #F2F2F2; /* gray95 — disabled btn */
  --ink-50:     #F7F7F7; /* field background */
  --white:      #FFFFFF;
  --black:      #000000;

  /* ------- Semantic ------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-500);
  --fg-3: var(--ink-400);
  --fg-muted: var(--ink-300);
  --fg-inverse: var(--white);
  --fg-error: var(--wilow-red);
  --fg-success: var(--wilow-green);

  --bg-app:     var(--cream-0);
  --bg-surface: var(--white);
  --bg-header:  var(--cream-3);
  --bg-field:   var(--ink-50);
  --bg-chip:    var(--cream-2);
  --bg-chip-selected: var(--ink);
  --bg-tag-yellow: var(--wilow-yellow);
  --bg-tag-orange: var(--wilow-orange);

  --border-hairline: rgba(0, 0, 0, 0.05);
  --border-card:     rgba(0, 0, 0, 0.08);
  --border-strong:   var(--ink-150);

  /* ------- Type families ------- */
  --font-display: "Mint Grotesk", "Mint Grotesk Trial", "DM Sans",
    "Nunito Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Noto Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-arabic: "DIN Arabic", "Noto Arabic", "Noto Sans Arabic", sans-serif;

  /* ------- Type scale (mobile 390px reference) ------- */
  --text-display-xl: 700 32px/1.1 var(--font-display);   /* Hi, Mariia 👋  */
  --text-display-lg: 500 24px/1.1 var(--font-display);   /* section titles */
  --text-display-md: 500 20px/1.2 var(--font-display);
  --text-title:      500 18px/1.25 var(--font-display);
  --text-body-lg:    500 16px/1.35 var(--font-body);
  --text-body:       400 14px/1.4  var(--font-body);
  --text-body-sm:    400 12px/1.4  var(--font-body);
  --text-label:      500 12px/1.0  var(--font-body);     /* UI labels */
  --text-label-sm:   500 10px/1.0  var(--font-body);     /* caption labels */
  --text-price:      700 32px/1.1  var(--font-display);

  /* ------- Spacing (4pt grid; native Flutter layouts use 16 / 20 frequently) ------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px; /* primary gutter */
  --space-5:  20px; /* appbar titleSpacing */
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;

  /* ------- Radii ------- */
  --radius-xs:  4px;
  --radius-sm:  8px;   /* buttons */
  --radius-md:  12px;
  --radius-lg:  16px;  /* cards */
  --radius-xl:  20px;
  --radius-2xl: 24px;  /* plan cards */
  --radius-pill: 999px;

  /* ------- Elevation ------- */
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-sm: 0 2px 6px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 6px 20px rgba(17, 17, 17, 0.06),
               0 2px 6px rgba(17, 17, 17, 0.04);
  --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.10);
  --shadow-card: 0 2px 12px rgba(17, 17, 17, 0.05);

  /* ------- Motion ------- */
  --ease-standard: cubic-bezier(.2, .0, .0, 1);
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;
}

/* ------- Semantic element styles ------- */
body {
  background: var(--bg-app);
  color: var(--fg-1);
  font: var(--text-body-lg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--text-display-xl); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
h2, .h2 { font: var(--text-display-lg); color: var(--fg-1); margin: 0; }
h3, .h3 { font: var(--text-display-md); color: var(--fg-1); margin: 0; }
h4, .h4 { font: var(--text-title);      color: var(--fg-1); margin: 0; }
p,  .p  { font: var(--text-body);       color: var(--fg-2); margin: 0; }
small, .small { font: var(--text-body-sm); color: var(--fg-2); }
.caption { font: var(--text-label-sm); color: var(--fg-2); }
.label   { font: var(--text-label);     color: var(--fg-1); }
.price   { font: var(--text-price);     color: var(--fg-1); }