/*
 * Postall Design System — Colors & Type Tokens
 *
 * Postall / postallcode.com is a Chilean last-mile logistics app whose
 * identity revolves around a single, deliberately loud orange
 * (#FF6D01 / rgb 255,109,1). This file defines the canonical color and
 * typographic primitives used across the mobile app, web app and brand
 * surfaces. Import first, then layer component styles on top.
 */
@import url("./fonts/satoshi.css");

:root {
  /* ──────────────────────────────────────────────────────────────
   * BRAND / PRIMARY — the "Postall Orange" family.
   * The brand has ~4 orange tones that appear in the Figma source:
   *   - Primary orange   (#FF6D01)  logo, CTA, highlights
   *   - Header orange    (#F05F23)  mobile app header blocks
   *   - Deep orange      (#FF5200)  landing page CTA, stroke
   *   - Accent orange    (#F26B26)  secondary, tinted fills
   *   - Sunny yellow     (#FFE800)  logo accent, illustration pops
   *   - Amber            (#FF9501)  logo shadow/secondary accent
   * ────────────────────────────────────────────────────────────── */
  --pc-orange:         #FF6D01;   /* Brand primary */
  --pc-orange-header:  #F05F23;   /* Mobile header / large blocks */
  --pc-orange-deep:    #FF5200;   /* Web CTA, outline buttons */
  --pc-orange-accent:  #F26B26;   /* Text links / active state */
  --pc-orange-ee:      #EE5522;   /* Low-emphasis orange */
  --pc-orange-amber:   #FF9501;   /* Logo amber accent */
  --pc-yellow:         #FFE800;   /* Logo yellow accent */

  /* Tinted fills for backgrounds / chips */
  --pc-orange-050:     #FFF3EC;
  --pc-orange-100:     #FFE3D1;
  --pc-orange-200:     #FFC9A7;

  /* ──────────────────────────────────────────────────────────────
   * NEUTRALS / TEXT — cool, slightly blue-leaning slate palette.
   * rgb(58,73,96) is the signature body text color on light bg.
   * ────────────────────────────────────────────────────────────── */
  --pc-ink:            #230B00;   /* Near-black body text (brown undertone) */
  --pc-ink-soft:       rgba(35, 11, 0, 0.9);
  --pc-ink-muted:      rgba(35, 11, 0, 0.4);
  --pc-slate-900:      #202224;
  --pc-slate-800:      #2D3436;
  --pc-slate-700:      #3A4960;   /* Brand's preferred slate for body on tinted bg */
  --pc-slate-500:      #5A6B82;
  --pc-slate-400:      #A1A19D;
  --pc-slate-300:      #D9D9D9;
  --pc-slate-200:      #E7ECF1;
  --pc-slate-150:      #F0F3F7;   /* Fill behind cards on neutral surface */
  --pc-slate-100:      #F1F4FB;   /* Section backgrounds */
  --pc-slate-050:      #F6F6FB;   /* Rounded tile background */
  --pc-surface-alt:    #F6F7FA;   /* Page background on join/login screens */

  --pc-white:          #FFFFFF;
  --pc-black:          #000000;

  /* ──────────────────────────────────────────────────────────────
   * SEMANTIC / STATUS — availability states used across mobile app.
   * (see Landing Page availability widget: Active / Away / Receiving / Busy)
   * ────────────────────────────────────────────────────────────── */
  --pc-success:        #3EB52B;   /* "Activo, estoy en casa" */
  --pc-warning:        #FFCC00;   /* "Alguien puede recibir por mí" */
  --pc-info:           #0075FF;   /* "Operador en ruta" */
  --pc-danger:         #F1163A;   /* Delete / burn code */
  --pc-pink:           #FFBBCB;   /* Illustration accent */
  --pc-ruby:           #B70042;   /* Illustration accent / laptop */

  /* Semantic surface roles */
  --pc-bg:             #FFFFFF;
  --pc-bg-elev:        #FFFFFF;
  --pc-bg-muted:       var(--pc-slate-100);
  --pc-fg:             var(--pc-ink);
  --pc-fg-2:           var(--pc-slate-700);
  --pc-fg-3:           var(--pc-slate-500);
  --pc-border:         rgba(0, 0, 0, 0.08);
  --pc-border-strong:  rgba(0, 0, 0, 0.20);
  --pc-divider:        #F0F3F7;

  /* ──────────────────────────────────────────────────────────────
   * TYPE — Satoshi everywhere. (Kohinoor Telugu + Inter appear in the
   * Figma source as ad-hoc substitutes; the brief specifies Satoshi
   * must prevail, so we collapse the stack onto Satoshi.)
   * ────────────────────────────────────────────────────────────── */
  --pc-font-sans:   "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pc-font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pc-fw-light:    300;
  --pc-fw-regular:  400;
  --pc-fw-medium:   500;
  --pc-fw-bold:     700;
  --pc-fw-black:    900;

  /* Type scale — matches the Figma usage counts. */
  --pc-text-12:     12px;   /* micro labels, captions */
  --pc-text-13:     13px;   /* helper text */
  --pc-text-14:     14px;   /* small body */
  --pc-text-16:     16px;   /* default body */
  --pc-text-18:     18px;   /* large body / subheads */
  --pc-text-20:     20px;   /* h4 / button L */
  --pc-text-24:     24px;   /* h3 */
  --pc-text-28:     28px;   /* h2 */
  --pc-text-32:     32px;   /* h1 / display-s */
  --pc-text-38:     38px;   /* screen hero */
  --pc-text-48:     48px;   /* display-m */
  --pc-text-64:     64px;   /* display-l (brand key art) */

  --pc-lh-tight:    1.0;    /* Figma uses "100%" line height in headers */
  --pc-lh-snug:     1.07;
  --pc-lh-normal:   1.20;   /* mobile app body */
  --pc-lh-relaxed:  1.42;   /* long-form copy */

  /* ──────────────────────────────────────────────────────────────
   * SPACING — 4px base unit.
   * ────────────────────────────────────────────────────────────── */
  --pc-space-1:   4px;
  --pc-space-2:   8px;
  --pc-space-3:   12px;
  --pc-space-4:   16px;
  --pc-space-5:   20px;
  --pc-space-6:   24px;
  --pc-space-8:   32px;
  --pc-space-10:  40px;
  --pc-space-12:  48px;
  --pc-space-16:  64px;
  --pc-space-20:  80px;

  /* ──────────────────────────────────────────────────────────────
   * RADII — the brand uses small (6px) radii on interactive chrome
   * and large (16–24px) radii on surface cards and sheet corners.
   * ────────────────────────────────────────────────────────────── */
  --pc-radius-xs:   4px;
  --pc-radius-sm:   6px;   /* buttons, inputs, chips */
  --pc-radius-md:   12px;  /* service tiles */
  --pc-radius-lg:   16px;  /* home grid tiles */
  --pc-radius-xl:   24px;  /* bottom of header hero */
  --pc-radius-pill: 999px;

  /* ──────────────────────────────────────────────────────────────
   * ELEVATION — soft, low-blur shadows. Brand prefers subtle over
   * aggressive. Shadow tokens below mirror Figma values directly.
   * ────────────────────────────────────────────────────────────── */
  --pc-shadow-1:  0 0 11px rgba(0, 0, 0, 0.05);          /* resting card */
  --pc-shadow-2:  0 0 16px rgba(0, 0, 0, 0.10);          /* hero input */
  --pc-shadow-3:  0 4px 4px  rgba(0, 0, 0, 0.15);         /* floating CTA */
  --pc-shadow-4:  0 8px 24px rgba(0, 0, 0, 0.12);         /* modal */

  /* Motion */
  --pc-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --pc-duration-fast: 140ms;
  --pc-duration-med:  220ms;
  --pc-duration-slow: 420ms;
}

/* ──────────────────────────────────────────────────────────────────
 * SEMANTIC ELEMENT STYLES
 * Drop this file in and basic typography + focus states just work.
 * ────────────────────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--pc-font-sans);
  font-weight: var(--pc-fw-regular);
  font-size: var(--pc-text-16);
  line-height: var(--pc-lh-normal);
  color: var(--pc-fg);
  background: var(--pc-bg);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pc-font-sans);
  color: var(--pc-fg);
  margin: 0;
  line-height: var(--pc-lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--pc-text-38); font-weight: var(--pc-fw-bold); }
h2 { font-size: var(--pc-text-32); font-weight: var(--pc-fw-bold); }
h3 { font-size: var(--pc-text-24); font-weight: var(--pc-fw-bold); }
h4 { font-size: var(--pc-text-20); font-weight: var(--pc-fw-bold); }
h5 { font-size: var(--pc-text-18); font-weight: var(--pc-fw-bold); }
h6 { font-size: var(--pc-text-16); font-weight: var(--pc-fw-bold); letter-spacing: 0.02em; text-transform: uppercase; }

p  { margin: 0; text-wrap: pretty; }

small { font-size: var(--pc-text-13); color: var(--pc-fg-3); }

code, kbd, samp {
  font-family: var(--pc-font-mono);
  font-size: 0.94em;
  background: var(--pc-slate-050);
  padding: 2px 6px;
  border-radius: var(--pc-radius-xs);
}

a {
  color: var(--pc-orange-deep);
  text-decoration: none;
  transition: opacity var(--pc-duration-fast) var(--pc-ease);
}
a:hover { opacity: 0.72; }

::selection { background: var(--pc-orange); color: #fff; }

/* Display / overline utility classes that show up in the Figma */
.pc-eyebrow {
  font-size: var(--pc-text-18);
  font-weight: var(--pc-fw-bold);
  letter-spacing: 0.01em;
  color: var(--pc-orange);
  text-transform: none;
}
.pc-display {
  font-family: var(--pc-font-sans);
  font-weight: var(--pc-fw-bold);
  font-size: var(--pc-text-64);
  line-height: var(--pc-lh-snug);
  letter-spacing: -0.02em;
}
.pc-code-tag {
  font-family: var(--pc-font-mono);
  font-weight: var(--pc-fw-bold);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}