/* ============================================================
   PATAPIPS DESIGN TOKENS — Premium Enterprise
   ------------------------------------------------------------
   Aesthetic: Dell / HP enterprise retail.
   - Corporate deep blue as the single accent
   - White chrome (header, cards) with grey section bands
   - Square corners (2px), thin borders, minimal shadows
   - Color reserved for status signals only
   ============================================================ */

:root {
    /* --- Brand: the one accent color --- */
    --pp-blue:        #0A4C8B;   /* primary deep corporate blue */
    --pp-blue-dark:   #063A6B;   /* hover / pressed */
    --pp-blue-light:  #1F6FB8;   /* lighter accent, hover states */
    --pp-blue-tint:   #EAF1F8;   /* subtle blue background wash */
    --pp-blue-line:   #C9DCEF;   /* light blue divider */

    /* --- Ink & neutrals --- */
    --pp-ink:         #1A1A1A;   /* headings, primary text */
    --pp-ink-2:       #333333;   /* body copy */
    --pp-muted:       #6B6B6B;   /* secondary text, metadata */
    --pp-muted-2:     #999999;   /* micro labels */
    --pp-line:        #DCDCDC;   /* borders */
    --pp-line-2:      #ECECEC;   /* subtle dividers */
    --pp-bg:          #FFFFFF;   /* page base */
    --pp-bg-alt:      #F7F7F7;   /* section band */
    --pp-bg-alt-2:    #EFEFEF;   /* darker band */
    --pp-bg-dark:     #1A1A1A;   /* footer, drawer header */

    /* --- Status — used sparingly --- */
    --pp-new:         #0A7B3E;   /* deep green for "New" */
    --pp-refurb:      #A86200;   /* deep amber for "Refurbished" */
    --pp-certified:   #0B6E8F;   /* deep teal for "Certified" */
    --pp-danger:      #B32424;

    /* --- Typography --- */
    --pp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --pp-font-head: var(--pp-font);

    --pp-fs-xs:   0.75rem;    /* 12px */
    --pp-fs-sm:   0.8125rem;  /* 13px */
    --pp-fs-base: 0.9375rem;  /* 15px — body */
    --pp-fs-md:   1rem;       /* 16px */
    --pp-fs-lg:   1.125rem;   /* 18px */
    --pp-fs-xl:   1.375rem;   /* 22px */
    --pp-fs-2xl:  1.75rem;    /* 28px */
    --pp-fs-3xl:  2.25rem;    /* 36px */
    --pp-fs-4xl:  3rem;       /* 48px */
    --pp-fs-5xl:  3.5rem;     /* 56px */

    /* --- Spacing (4px base) --- */
    --pp-sp-1: 0.25rem;
    --pp-sp-2: 0.5rem;
    --pp-sp-3: 0.75rem;
    --pp-sp-4: 1rem;
    --pp-sp-5: 1.25rem;
    --pp-sp-6: 1.5rem;
    --pp-sp-8: 2rem;
    --pp-sp-10: 2.5rem;
    --pp-sp-12: 3rem;
    --pp-sp-16: 4rem;

    /* --- Radii — corporate, minimal --- */
    --pp-radius-sm: 2px;
    --pp-radius:    2px;
    --pp-radius-lg: 4px;

    /* --- Shadows — subtle, purposeful --- */
    --pp-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --pp-shadow:    0 2px 6px rgba(0,0,0,0.08);
    --pp-shadow-lg: 0 8px 24px rgba(0,0,0,0.10);

    /* --- Layout --- */
    --pp-max-width:    1320px;
    --pp-utility-h:    36px;
    --pp-header-h:     76px;
    --pp-nav-h:        52px;
    --pp-safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

body {
    font-family: var(--pp-font);
    font-size: var(--pp-fs-base);
    line-height: 1.55;
    color: var(--pp-ink-2);
    background: var(--pp-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--pp-blue); text-decoration: none; }
a:hover { color: var(--pp-blue-dark); text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pp-font-head);
    color: var(--pp-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}