/* =========================================================
   Penpal — design system
   The single source of truth: tokens, reset, responsive shell.
   Everything downstream reads these variables; no view should
   hard-code a colour, size or breakpoint again.
   ========================================================= */

@layer tokens, base, shell, layout, views, overrides;

/* ---------------------------------------------------------
   tokens
   --------------------------------------------------------- */
@layer tokens {
  :root {
    /* neutral ramp — one hue, five stops above the page */
    --bg:        #F1F1EF;
    --paper:     #FAFAF9;
    --paper-2:   #F4F4F2;
    --surface:   #FFFFFF;
    --surface-2: #F6F6F4;
    --line:      #E7E7E4;
    --line-soft: #F0F0ED;

    --ink:   #131312;
    --ink-2: #56564F;
    --ink-3: #8C8C85;
    --ink-4: #B6B6AE;

    /* one accent, used only where the eye should land */
    --accent:      #2F6F55;
    --accent-ink:  #FFFFFF;
    --accent-soft: #E7F0EB;

    /* semantics */
    --red:       #B23A2E;
    --red-soft:  #F8E9E7;
    --amber:     #A9772B;
    --amber-soft:#F8EFDF;
    --bubble:    var(--surface);

    /* type — fluid, so a 320px phone and a 1440px desktop share one scale */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    --font-display: "Fraunces", Georgia, "Songti SC", "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-2xs: 10px;
    --fs-xs:  11px;
    --fs-sm:  12.5px;
    --fs-md:  14px;
    --fs-base:15px;
    --fs-lg:  17px;
    --fs-xl:  20px;
    --fs-2xl: clamp(24px, 5vw, 30px);
    --fs-3xl: clamp(38px, 11vw, 64px);

    --lh-tight: 1.25;
    --lh-body:  1.5;
    --lh-loose: 1.62;

    /* space */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 44px;
    --gutter: 16px;

    /* radius */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-full: 999px;

    /* elevation */
    --shadow-sm: 0 1px 2px rgba(19,19,18,.05);
    --shadow-md: 0 6px 24px rgba(19,19,18,.08);
    --shadow-lg: 0 18px 50px rgba(19,19,18,.14);

    /* motion */
    --ease: cubic-bezier(.32,.72,0,1);
    --dur-1: .16s;
    --dur-2: .26s;
    --dur-3: .34s;

    /* chrome */
    --bar-h: 52px;
    --tabbar-h: 54px;
    --rail-w: 84px;
    --list-w: 328px;
    --app-max: 1440px;
    --measure: 720px;

    color-scheme: light;
  }

  [data-theme="dark"] {
    --bg:        #0F0F0E;
    --paper:     #151514;
    --paper-2:   #1B1B19;
    --surface:   #1C1C1A;
    --surface-2: #232321;
    --line:      #2B2B28;
    --line-soft: #232320;

    --ink:   #F0F0EC;
    --ink-2: #ABABA3;
    --ink-3: #7D7D75;
    --ink-4: #55554F;

    --accent:      #7FBFA0;
    --accent-ink:  #0F0F0E;
    --accent-soft: #1E2B25;

    --red:       #E0685B;
    --red-soft:  #2E1C19;
    --amber:     #D4A55F;
    --amber-soft:#2B2418;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 24px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.6);

    color-scheme: dark;
  }
}

/* ---------------------------------------------------------
   base
   --------------------------------------------------------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html, body { height: 100%; margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    justify-content: center;
    overscroll-behavior: none;
  }

  h1, h2, h3, h4, p, figure { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }

  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  button:disabled { cursor: default; opacity: .5; }

  a { color: var(--accent); text-decoration: none; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  img, svg { display: block; max-width: 100%; }

  [hidden] { display: none !important; }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: var(--ink-4);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--r-full);
    opacity: .4;
  }
  ::-webkit-scrollbar-track { background: transparent; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------------------------------------------------------
   shell — the responsive frame around every view
   < 720px  single column
   720px+   two columns  (rail+list on the left, content right)
   1100px+  three columns (icon rail, list, content)
   --------------------------------------------------------- */
@layer shell {
  /* Phone: a plain vertical stack — one pane at a time, tabs pinned at the
     bottom. Wide screens switch to a column grid; the same children simply
     land in named cells, so there is no second template. */
  .app {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--app-max);
    height: 100dvh;
    background: var(--paper);
    overflow: hidden;
  }

  @media (min-width: 600px) {
    .app {
      box-shadow: var(--shadow-md);
      border-left: 1px solid var(--line);
      border-right: 1px solid var(--line);
    }
  }

  @media (min-width: 720px) {
    .app {
      display: grid;
      grid-template-areas: "side main";
      grid-template-columns: var(--list-w) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .app {
      grid-template-areas: "rail side main";
      grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr);
    }
  }
}

/* ---------------------------------------------------------
   layout helpers shared by views
   --------------------------------------------------------- */
@layer layout {
  /* Phones: one view at a time, absolutely stacked. Wide: views sit in
     their grid columns, so absolute positioning has to be switched off.
     Keep the media query first: later rules in a layer win outright. */
  .view {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    transition: transform var(--dur-3) var(--ease);
    z-index: 2;
  }

  /* the chat pane slides in on phones only */
  .view.chat-view {
    transform: translateX(100%);
    z-index: 6;
  }
  .view.chat-view.open { transform: none; }

  @media (min-width: 720px) {
    .view {
      position: static;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      transform: none;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    .view.chat-view {
      grid-area: main;
      transform: none;
      border-left: 1px solid var(--line);
    }
    .view.chat-view:not(.open) { display: none; }
  }

  .stack {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .centered {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* ----- navigation ----- */
  .tabbar {
    flex: 0 0 auto;
    z-index: 12;
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar[hidden] { display: none !important; }
  .tabbar .tab {
    flex: 1 1 0;
    min-width: 0;
    height: var(--tabbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--ink-3);
    font-size: var(--fs-2xs);
    line-height: 1.1;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease);
  }
  .tabbar .tab svg { width: 21px; height: 21px; flex: 0 0 auto; }
  .tabbar .tab-label { display: block; }
  .tabbar .tab.on { color: var(--ink); }
  .tabbar .tab.on .tab-label { font-weight: 600; }
  .tabbar .tab:active { color: var(--accent); }

  /* Phone: panes are absolutely stacked (see :where(.view) below), so they
     reserve room for the tab bar instead of sharing a flex row with it. */
  .list-view,
  .tab-view {
    grid-area: main;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }
  .list-view, .tab-view, .view.chat-view { display: flex; }
  .list-view[hidden], .tab-view[hidden], .view.chat-view[hidden] { display: none !important; }

  /* ----- wide screens: list stays left, content moves right ----- */
  @media (min-width: 720px) {
    .tabbar {
      grid-area: side;
      align-self: end;
      border-top: 1px solid var(--line);
      padding-bottom: 0;
    }
    .tabbar .tab {
      height: 50px;
      flex-direction: row;
      gap: 6px;
      font-size: var(--fs-xs);
    }

    .list-view {
      grid-area: side;
      align-self: start;
      flex: 1 1 auto;
      padding-bottom: var(--tabbar-h);
    }
    /* Only the inbox splits into columns (list on the left, chat on the
       right). The other tabs are full-page reads, so they span every column
       instead of sitting in the right column with an empty gutter beside. */
    .tab-view {
      grid-column: 1 / -1;
      grid-row: 1;
      border-left: 0;
      background: var(--paper);
      padding-bottom: 0;
    }
  }

  @media (min-width: 1100px) {
    .tabbar {
      grid-area: rail;
      align-self: stretch;
      flex-direction: column;
      justify-content: flex-start;
      gap: var(--sp-1);
      padding: var(--sp-4) var(--sp-2);
      border-top: 0;
      border-right: 1px solid var(--line);
    }
    .tabbar .tab {
      flex: 0 0 auto;
      height: 58px;
      flex-direction: column;
      gap: 4px;
      border-radius: var(--r-md);
    }
    .tabbar .tab.on { background: var(--surface-2); }
    .list-view { grid-area: side; border-right: 1px solid var(--line); }
  }

  /* Phone: panes are absolutely stacked so the chat can slide over the list.
     This stays outside the media queries and carries the lowest specificity
     (:where) so the wide-screen grid placement always wins. */
  :where(.view) {
    position: absolute;
    inset: 0;
  }

  /* The sheet, the action sheet and their inner parts are laid out in
     desktop.css. The rules that used to live here stacked the header and the
     body in one grid cell, so the header sat at 620px while the dialog was
     760px wide — the misalignment this file no longer causes. */
}