/* INDOGENMED PHARMACY DESIGN SYSTEM
   Based on: IndoGenMed Mobile Templates v2.dc.html
   Author: IGM Health
   Version: 1.0.0
   Critical for: Homepage, Product Detail, Cart, Checkout, Account screens
*/

/* Color Palette */
:root {
    /* Neutrals */
    --white: #ffffff;
    --navy-900: #001a32;
    --navy-800: #001e4a;
    --navy-700: #002b5d;
    --gray-50: #f7f9fc;
    --gray-100: #f9f9f9;
    --gray-200: #e0e0e0;
    --gray-300: #d9e1ea;
    --gray-400: #dddddd;
    /* Muted body text. Was #958b8b, which is 3.31:1 on white — it failed
       WCAG AA (4.5:1) everywhere it was used, and it is used for every meta
       line, step label and caption in the funnel. #5f6b7a is 5.43:1 and is
       the mockup's own eyebrow grey, so the change is design-native rather
       than an invented colour. */
    --gray-500: #5f6b7a;
    /* Placeholders and disabled glyphs, which WCAG's contrast rules exempt.
       Anything a user has to read uses --gray-500. */
    --gray-450: #958b8b;
    --gray-600: #666666;
    --gray-700: #555555;
    --gray-900: #333333;
    --ink: #1a1a1a;
    --text-body: var(--gray-900);
    --text-heading: var(--navy-700);

    /* Brand/Accent Colors */
    --red-500: #d02128;
    --red-600: #b0161c;
    --orange-500: #f36a4a;
    /* #f36a4a carries white text at only 3.01:1 and reads on white at 3.01:1,
       so it cannot be used for button labels or small text. --orange-600 is
       4.54:1 with white on it; --orange-300 is 6.42:1 as text on navy. */
    --orange-600: #d1462a;
    --orange-300: #ff9a7d;
    --success-700: #0b5b3c;
    --success-bg: #dcf5ea;
    --warning-700: #8e6112;
    --warning-bg: #fff6da;

    /* Brand Tint Variations */
    --brand-tint-08: rgba(0, 43, 93, 0.08);
    --brand-tint-30: rgba(0, 26, 50, 0.3);
    --ls-tight: -1px;
    --ls-caps: 0.15em;

    /* Gradients */
    --gradient-product-frame: radial-gradient(circle at top left, #f8fbff 0%, #eef3fb 40%, #ffffff 100%);
    --gradient-form-wash: linear-gradient(180deg, #eef3fb, #f8fbff);
    --gradient-hero-navy: linear-gradient(135deg, var(--navy-700), var(--navy-800));

    /* Border Colors */
    --border-tint-08: rgba(0, 43, 93, 0.08);
    --border-on-brand: var(--navy-700);
    --border-3: 3px solid var(--navy-700);

    /* Radius */
    --radius-xs: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-md: 0 10px 30px rgba(0, 43, 93, 0.08);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 10px 30px rgba(0, 43, 93, 0.08);

    /* Focus */
    --focus-ring: 0 0 0 3px rgba(0, 43, 93, 0.15);
    --focus-outline: var(--focus-ring);

    /* Easing & Transition */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --transition-fast: all .2s var(--ease-standard);

    /* Semantic colour aliases */
    --color-primary: var(--navy-700);
    --color-secondary: var(--red-500);
    --color-accent: var(--orange-500);

    /* Font stacks */
    --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Manrope", "Roboto", system-ui, sans-serif;

    /* Tokens required by the v2 mockups (values taken from the mockup design
       system, not invented). Added after an audit found 10 of the mockups' 52
       tokens undefined here — --font-meta and --navy-400 are used in rendered
       markup, so they were resolving to nothing. */
    --star-filled: #ffa900;
    /* Meta text was Poppins. A whole third family — seven woff2 files across
       three faces — was being fetched for small labels, so it now rides on
       Roboto, which is already loaded for body copy. */
    --font-meta: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ls-eyebrow: 0.2em;
    --radius-2xl: 18px;
}