/*
 * Idlis Design System — Colors & Typography
 * Source: IdlisBUY App Figma file + Inter font uploads
 *
 * SF Pro is the iOS system font used throughout the app for display/body text.
 * Inter is used for interactive elements (buttons, labels).
 * In web contexts, use Inter as the primary font for both roles.
 */

/* ─── Fonts ──────────────────────────────────────────────────────── */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Thin.ttf"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-ExtraLight.ttf"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Light.ttf"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-ExtraBold.ttf"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Black.ttf"); font-weight: 900; font-display: swap; }

:root {
  /* ─── Base color palette ──────────────────────────────────────── */

  /* ── Official brand palette (Graphics guidelines — idlis_colors theme) ── */
  --color-brand-deep-purple:    #3C0179;             /* Deep Purple — primary brand anchor */
  --color-brand-pink:           #FF4EC3;             /* Hot Pink — brand accent 2 */
  --color-brand-lime:           #CCFF00;             /* Neon Lime — brand accent 3 */
  --color-brand-mid-purple:     #6957DA;             /* Medium Purple — app UI CTA */

  /* ── App-level UI purples (from Figma interaction flows) ── */
  --color-brand-primary:        rgb(115, 94, 243);   /* #735EF3 — app button default */
  --color-brand-primary-dark:   rgb(109, 87, 242);   /* #6D57F2 — hover/pressed */
  --color-brand-light:          rgb(193, 183, 255);  /* #C1B7FF — tinted surface */
  --color-brand-blue:           rgb(102, 131, 234);  /* #6683EA — secondary accent */
  --color-brand-cta-blue:       rgb(0, 99, 245);     /* #0063F5 — strong CTA */

  /* Destructive / error */
  --color-destructive:          rgb(246, 86, 98);    /* #F65662 */

  /* Neutrals — dark */
  --color-ink-900:              rgb(0, 0, 0);        /* #000000 — pure black text */
  --color-ink-800:              rgb(13, 13, 13);     /* #0D0D0D — primary text */
  --color-ink-700:              rgb(26, 26, 26);     /* #1A1A1A */
  --color-ink-600:              rgb(38, 38, 38);     /* #262626 */
  --color-ink-500:              rgb(56, 56, 56);     /* #383838 */
  --color-ink-400:              rgb(89, 89, 89);     /* #595959 */
  --color-ink-300:              rgb(115, 115, 115);  /* #737373 */
  --color-ink-200:              rgb(153, 153, 153);  /* #999999 — placeholder */

  /* Neutrals — light */
  --color-surface-bg:           rgb(228, 229, 230);  /* #E4E5E6 — app background */
  --color-surface-card:         rgb(255, 255, 255);  /* #FFFFFF — card bg */
  --color-surface-divider:      rgb(230, 230, 230);  /* #E6E6E6 — dividers */
  --color-surface-subtle:       rgb(242, 243, 244);  /* #F2F3F4 — subtle bg */
  --color-surface-disabled:     rgb(217, 217, 217);  /* #D9D9D9 — disabled state */

  /* ─── Semantic tokens ─────────────────────────────────────────── */

  /* Text */
  --fg-primary:       var(--color-ink-800);
  --fg-secondary:     var(--color-ink-300);
  --fg-placeholder:   var(--color-ink-200);
  --fg-on-dark:       rgb(255, 255, 255);
  --fg-link:          var(--color-ink-800);
  --fg-destructive:   var(--color-destructive);

  /* Backgrounds */
  --bg-app:           var(--color-surface-bg);
  --bg-card:          var(--color-surface-card);
  --bg-action:        var(--color-ink-800);      /* primary CTA bg (dark) */
  --bg-brand:         var(--color-brand-primary);/* brand-purple CTA bg */
  --bg-disabled:      var(--color-surface-disabled);
  --bg-input:         var(--color-surface-card);

  /* Borders */
  --border-default:   var(--color-surface-bg);
  --border-strong:    var(--color-ink-800);

  /* ─── Typography scale ────────────────────────────────────────── */

  /* Font families */
  --font-display:     "Inter", system-ui, sans-serif;
  --font-body:        "Inter", system-ui, sans-serif;
  --font-label:       "Inter", system-ui, sans-serif;

  /* Display / hero (SF Pro Light weight equiv → Inter Light) */
  --text-hero:        300 56px/1.0 var(--font-display);   /* large hero numbers */
  --text-display-xl:  300 44px/1.0 var(--font-display);   /* home screen title */
  --text-display-lg:  400 42px/1.0 var(--font-display);
  --text-display-md:  400 32px/1.2 var(--font-display);   /* section headers */

  /* Body */
  --text-title-lg:    500 24px/1.2 var(--font-body);
  --text-title-md:    500 20px/1.2 var(--font-body);
  --text-title-sm:    500 18px/1.2 var(--font-body);      /* nav titles, card heads */
  --text-body-lg:     400 16px/1.2 var(--font-body);      /* primary body text */
  --text-body-md:     400 14px/1.2 var(--font-body);      /* secondary body */
  --text-body-sm:     500 12px/1.2 var(--font-body);      /* captions */
  --text-label:       500 16px/20px var(--font-label);    /* button labels */
  --text-label-sm:    500 14px/1.2 var(--font-label);

  /* ─── Spacing ─────────────────────────────────────────────────── */
  --space-2:    2px;
  --space-4:    4px;
  --space-8:    8px;
  --space-10:   10px;
  --space-12:   12px;
  --space-16:   16px;
  --space-24:   24px;
  --space-32:   32px;
  --space-40:   40px;
  --space-48:   48px;

  /* Page horizontal padding */
  --page-px:    24px;

  /* ─── Radii ───────────────────────────────────────────────────── */
  --radius-sm:    7px;    /* small pill (ad link badge) */
  --radius-md:    10px;   /* buttons */
  --radius-lg:    16px;   /* input groups, small cards */
  --radius-xl:    24px;   /* main cards, bottom sheets */
  --radius-full:  100px;  /* progress bars, pills */

  /* ─── Shadows ─────────────────────────────────────────────────── */
  --shadow-card:   0px 4px 24px 0px rgba(0,0,0,0.10);
  --shadow-subtle: 0px 2px 8px 0px rgba(0,0,0,0.06);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

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

h1 { font: var(--text-display-xl); color: var(--fg-primary); margin: 0; }
h2 { font: var(--text-display-md); color: var(--fg-primary); margin: 0; }
h3 { font: var(--text-title-md);   color: var(--fg-primary); margin: 0; }
h4 { font: var(--text-title-sm);   color: var(--fg-primary); margin: 0; }
p  { font: var(--text-body-lg);    color: var(--fg-primary); margin: 0; }
small { font: var(--text-body-sm); color: var(--fg-secondary); }
a  { color: var(--fg-link); text-decoration: underline; }